如果不在父控制器中使用服务或构建观察者,那么如何让儿童状态访问主控制器$scope
.
.state("main", {
controller:'mainController',
url:"/main",
templateUrl: "main_init.html"
})
.state("main.1", {
controller:'mainController',
parent: 'main',
url:"/1",
templateUrl: 'form_1.html'
})
.state("main.2", {
controller:'mainController',
parent: 'main',
url: "/2",
templateUrl: 'form_2.html'
})
Run Code Online (Sandbox Code Playgroud)
我无法在子状态下访问mainController范围 - 或者说我正在获取该范围的另一个实例 - 而不是我想要的.我觉得我错过了一些简单的事情.状态对象中有一个共享数据配置选项,但我不确定是否应将此类用于此类.
我很困惑控制器何时实例化.此外,嵌套状态时控制器如何实例化.我可能会对范围如何附加到视图和控制器感到困惑,也就是说,如果每个视图都有自己的控制器和范围,或者它们共享相同的范围.
有人可以解释控制器何时实例化?在嵌套路由下,所有视图共享一个控制器和范围吗?当我切换状态并返回状态会发生另一个控制器实例化时会发生什么?
以下是我的路线(配置文件):
.config (googleAnalyticsCordovaProvider, $stateProvider, $urlRouterProvider, IdleProvider, KeepaliveProvider) ->
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppController'
})
.state('app.pincode', {
url: '/pincode',
views: {
menuContent: {
templateUrl: 'templates/pincode-yield.html',
controller: 'PincodeController'
}
}
})
.state('app.pincode.create', {
url: '/create',
views: {
pincode: {
templateUrl: 'templates/pincode-create.html',
controller: 'PincodeController'
}
}
})
.state('app.pincode.pincodeLogin', {
url: '/login',
views: {
pincode: {
templateUrl: 'templates/pincode-login.html',
controller: 'PincodeController'
}
}
})
.state('app.pincode.settings', {
url: '/settings',
views: {
pincode: {
templateUrl: 'templates/settings.html',
controller: 'PincodeController'
} …
Run Code Online (Sandbox Code Playgroud) angularjs angularjs-scope angularjs-routing angular-ui-router
我有以下布局:
边栏和标题栏将始终存在,但其内容是特定于上下文的.
我认为这里有两个选项:嵌套状态(sidenav> Headerbar> Content)或视图(如果我理解正确的话).无论我读过多少视频和文章,我仍然在努力让我的脑袋缠绕在ui-router上.
单击Sidenav会将状态(或视图)加载到Content中,Headerbar会根据加载到Content中的内容调整其内容.
我的感觉是,嵌套状态似乎是最简单的直接方法,特别是在考虑继承时.
从另一个角度来看,这些似乎可能是兄弟姐妹(虽然继承问题可能让我错了).我的观点是,观点将使我在未来的子项目等方面具有更大的灵活性.
当然,ng-include和指令也可以发挥作用.
成为ui-router的新手可能有人会把我拉向正确的方向吗?我卡住的地方正在加载主页视图.我希望我的用户在登录后可以在"内容"部分中看到他们的信息中心.然后,当用户从补充工具栏导航时,如何将新元素加载到内容中?
是否可以使用单例控制器获得多个视图[ https://github.com/angular-ui/ui-router/issues/494]?
使用案例:我有一个ui-view = header和ui-view = content.我根据当前状态更改标题以显示上下文相关按钮(即返回,保存,过滤等)我希望这些按钮在内容控制器中调用函数,但如果我执行以下操作,则会创建两个MyController对象.如果有任何init函数,它们会被调用两次,这在大多数情况下是对我的服务器的查询的两倍.
views:{
'header':{
templateURL:'...',
controller:'MyController'
},
'content':{
templateURL:'...',
controller:'MyController'
}
}
Run Code Online (Sandbox Code Playgroud)
更新:基于@pankajparkar
我当前的index.html看起来像这样(为了理解而简化)
<nav ui-view="header"></nav>
<div ui-view="content"></div>
Run Code Online (Sandbox Code Playgroud)
但你的建议包括/ REQUIRE子视图
<!--index.html-->
<body ui-view></body>
<!--format.html-->
<nav ui-view="header"></nav>
<div ui-view="content"></div>
Run Code Online (Sandbox Code Playgroud)
使用以下控制器
state('app', {
url: '/app',
controller: 'MyController',
templateURL: 'format.html', //Targets ui-view in index.html
views:{
'header':{
templateURL:'...', //Targets ui-view="header" in format.html
},
'content':{
templateURL:'...', //Targets ui-view="header" in content.html
}
}
});
Run Code Online (Sandbox Code Playgroud)