我有以下布局:

侧边栏和页眉将始终存在,尽管它们的内容是特定于上下文的。

我认为这里有两个选项:嵌套状态(sidenav> Headerbar>内容)或视图(如果我正确理解)。我仍然努力让我的头包裹在ui路由器,不管我看过多少视频和文章。

点击Sidenav会将状态(或视图)加载到Content中,Headerbar将根据加载到Content中的内容来调整其内容。

我的意思是,嵌套状态似乎是最简单的直接方法,特别是在考虑继承时。

从另一个角度来看,这些似乎可能是兄弟姐妹(虽然继承问题可能使我错了)。我的意见是,意见将使我在未来有更多的灵活性与子项目等。

当然,ng-include和指令可以发挥作用。

对于ui-router来说,新的人可能会向我正确的方向拍拍我吗?我被卡住的地方是加载家庭视图。登录后,我希望用户在“内容”部分看到他们的信息显示板。然后,如何在用户从侧栏导航时如何将新元素加载到“内容”?

一种如何设计场景,1)侧栏,2)动作部分和3)主区域可能像 this working example

首先是根状态。这里是根状态命名为’index’。这是抽象的,可以为我们做一些决心。它不影响儿童状态命名,并且不会扩展url(因为是未定义的)

$stateProvider
    .state('index',{
        abstract: true,//url: '/',views: {
          '@' : {
            templateUrl: 'layout.html',controller: 'IndexCtrl'
          },'top@index' : { templateUrl: 'tpl.top.html',},'left@index' : { templateUrl: 'tpl.left.html','main@index' : { templateUrl: 'tpl.main.html',})

第一个真实状态是列表,它继承自父项,但是具有属性parent:’index’,因此父名称不会影响状态名称。

优点是,它可以继承很多解决的东西。此外,对于所有其他父状态,根状态可以加载一次

.state('list',{
        parent: 'index',url: '/list',templateUrl: 'list.html',controller: 'ListCtrl'
      })

这是UI路由器的真正实力,因为现在我们可以看到孩子正在注入两个地方 – 1)动作部分和2)主区域

.state('list.detail',{
        url: '/:id',views: {
          'detail@index' : {
            templateUrl: 'detail.html',controller: 'DetailCtrl'
          },'actions@index' : {
            templateUrl: 'actions.html',controller: 'ActionCtrl'
          },})

这样,我们可以在现实世界中使用命名视图和多视图。请不要忘记范围定义如何:

Scope Inheritance by View Hierarchy Only

Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesting of your states and everything to do with the nesting of your views (templates).

It is entirely possible that you have nested states whose templates populate ui-views at varIoUs non-nested locations within your site. In this scenario you cannot expect to access the scope variables of parent state views within the views of children states.

检查所有在行动here

angularjs – 在ui-router中使用左栏布局的嵌套状态或视图?的更多相关文章

  1. ios – Xcode只看到一些嵌套类的类似扩展,这些扩展是用不同的文件编写的

    解决方法我遇到过类似的问题,似乎编译器正在尝试处理扩展嵌套类的文件,在嵌套类定义之前.因此,您有此错误说该Space没有成员SomeClass.我发现的解决方案是转到目标设置,打开BuildPhases.在“编译源”部分中,您应该将用于定义嵌套类的文件放在扩展它的文件上.这个解决方案似乎甚至可以很好地与您的观察结果一致,当您重新创建文件时,它有时会编译,因为当您重新创建文件时,它在编译源中的位置会发生变化.

  2. ios – 嵌套递归函数

    我试图做一个嵌套递归函数,但是当我编译时,编译器崩溃.这是我的代码:编译器记录arehere解决方法有趣的…它似乎也许在尝试在定义之前捕获到内部的引用时,它是bailing?以下修复它为我们:当然没有嵌套,我们根本没有任何问题,例如以下工作完全如预期:我会说:报告!

  3. ios – 在swift中将捕获列表正确放置在嵌套闭包中

    在Swift中为哪些嵌套闭包定义捕获的引用?如果[weakself]被捕获在只有内部最后面的闭包,GCD将保留ExampleDataSource,直到块完成执行,这就解释了为什么调试看起来像这样:同样的事情会发生,如果没有捕获列表被包括,我们从来没有可选地解开自己,尽管编译器,确实试图警告你!

  4. ios – 无效的软件包 – 嵌套软件包没有在CFBundleSupportedPlatforms Info.plist键中列出的正确平台

    我上传了一个应用程序到iOSAppStoretestflight.iOSAppStore收到以下电子邮件:InvalidBundle–Anestedbundledoesn’thavetherightplatformslistedinCFBundleSupportedplatformsInfo.plistkey.Oncetheseissueshavebeencorrected,youcanthenr

  5. ios – 如何在使用嵌套上下文时自动设置Core Data关系

    解决方法想到的第一个想法是,虽然姓名的人际关系是不可选的,但你并没有说Person的姓名关系也是不可选的.创建一个没有名字的人,可以用您的代码处理,然后在实际需要时创建名称吗?当然不用打扰自定义awakeFromInsert…

  6. cocoa-touch – Interface Builder:如何选择嵌套元素?

    在界面构建器中是否有一种方法可以看到我的元素树,以便我可以选择它们.在实际视图中选择内容非常困难,特别是当我有很多元素和嵌套视图等时.谢谢解决方法尝试按住shift并右键单击元素.它应该显示该元素下的视图层次结构的菜单.实际上,等一下,在层次结构中显示出这个元素之上的元素.你想要做的是使用Nib窗口,选择’Window’然后设置它的列视图,这样你就可以更轻松地导航.

  7. 寒城攻略:Listo 教你 25 天学会 Swift 语言 - 21 Nested Types

    //***********************************************************************************************//1.nestedTypes(类型嵌套)//________________________________________________________________________________

  8. Swift基础语法: 22 - Swift的函数类型, 嵌套函数

    前面我们讲解了函数里面的形参,现在让我们继续来看看函数的类型,以及嵌套函数,让我们一起来看看:1.使用函数类型在Swift中的函数声明和在OC中没什么区别,只有语法上的差异,但在Swift中有一项比较有趣的就是,声明变量或者常量的时候也是可以指定返回值的,比如:当然,常量也是可以如此的,这里就不多做解释了,想知道的朋友可以自己回去试试.2.作为形参类型的函数类型还有更好玩的就是,我们可以在声明新的

  9. Swift类型嵌套

    Swift中的类,结构体和枚举可以进行嵌套,即在某一类型的内部定义类,这种类型嵌套在JAVA中称为内部类,在C#中称为嵌套类,它们的形式和定义是相似的,类型嵌套的有点是能够访问它外部的成员,包括方法,属性和其他的嵌套类型,嵌套还可以有多个层次示例:

  10. Swift2.0语言教程之函数嵌套调用形式

    Swift2.0语言教程之函数嵌套调用形式Swift2.0语言函数嵌套调用形式在Swift中,在函数中还可以调用函数,从而形成嵌套调用。以下将对这两种调用进行详细讲解。调用方式如图7.4所示。图7.4函数嵌套的形式以下将使用函数的嵌套调用实现对s=22!这个数值,即调用f1()函数,计算22,结果为4,然后在调用f2()函数,对4的阶乘求取,计算完成22!但是在Swift语言中递归必须要有一个满足结束的条件。

随机推荐

  1. Angular2 innerHtml删除样式

    我正在使用innerHtml并在我的cms中设置html,响应似乎没问题,如果我这样打印:{{poi.content}}它给了我正确的内容:``但是当我使用[innerHtml]=“poi.content”时,它会给我这个html:当我使用[innerHtml]时,有谁知道为什么它会剥离我的样式Angular2清理动态添加的HTML,样式,……

  2. 为Angular根组件/模块指定@Input()参数

    我有3个根组件,由根AppModule引导.你如何为其中一个组件指定@input()参数?也不由AppModalComponent获取:它是未定义的.据我所知,你不能将@input()传递给bootstraped组件.但您可以使用其他方法来做到这一点–将值作为属性传递.index.html:app.component.ts:

  3. angular-ui-bootstrap – 如何为angular ui-bootstrap tabs指令指定href参数

    我正在使用角度ui-bootstrap库,但我不知道如何为每个选项卡指定自定义href.在角度ui-bootstrap文档中,指定了一个可选参数select(),但我不知道如何使用它来自定义每个选项卡的链接另一种重新定义问题的方法是如何使用带有角度ui-bootstrap选项卡的路由我希望现在还不算太晚,但我今天遇到了同样的问题.你可以通过以下方式实现:1)在控制器中定义选项卡href:2)声明一个函数来改变控制器中的散列:3)使用以下标记:我不确定这是否是最好的方法,我很乐意听取别人的意见.

  4. 离子框架 – 标签内部的ng-click不起作用

    >为什么标签标签内的按钮不起作用?>但是标签外的按钮(登陆)工作正常,为什么?>请帮我解决这个问题.我需要在点击时做出回复按钮workingdemo解决方案就是不要为物品使用标签.而只是使用divHTML

  5. Angular 2:将值传递给路由数据解析

    我正在尝试编写一个DataResolver服务,允许Angular2路由器在初始化组件之前预加载数据.解析器需要调用不同的API端点来获取适合于正在加载的路由的数据.我正在构建一个通用解析器,而不是为我的许多组件中的每个组件设置一个解析器.因此,我想在路由定义中传递指向正确端点的自定义输入.例如,考虑以下路线:app.routes.ts在第一个实例中,解析器需要调用/path/to/resourc

  6. angularjs – 解释ngModel管道,解析器,格式化程序,viewChangeListeners和$watchers的顺序

    换句话说:如果在模型更新之前触发了“ng-change”,我可以理解,但是我很难理解在更新模型之后以及在完成填充更改之前触发函数绑定属性.如果您读到这里:祝贺并感谢您的耐心等待!

  7. 角度5模板形式检测形式有效性状态的变化

    为了拥有一个可以监听其包含的表单的有效性状态的变化的组件并执行某些组件的方法,是reactiveforms的方法吗?

  8. Angular 2 CSV文件下载

    我在springboot应用程序中有我的后端,从那里我返回一个.csv文件WheniamhittingtheURLinbrowsercsvfileisgettingdownloaded.现在我试图从我的角度2应用程序中点击此URL,代码是这样的:零件:服务:我正在下载文件,但它像ActuallyitshouldbeBook.csv请指导我缺少的东西.有一种解决方法,但您需要创建一个页面上的元

  9. angularjs – Angular UI-Grid:过滤后如何获取总项数

    提前致谢:)你应该避免使用jQuery并与API进行交互.首先需要在网格创建事件中保存对API的引用.您应该已经知道总行数.您可以使用以下命令获取可见/已过滤行数:要么您可以使用以下命令获取所选行的数量:

  10. angularjs – 迁移gulp进程以包含typescript

    或者我应该使用tsc作为我的主要构建工具,让它解决依赖关系,创建映射文件并制作捆绑包?

返回
顶部