[英]Angular ui-router variable in nested view
我目前正在开发一个具有多个嵌套视图的应用程序,它们看起来像这样:
- ui-view
- ui-view="header"
- ui-view="nav"
- ui-view="body"
我的状态定义如下:
.state('index', {
url: '', // default route
templateUrl: 'welcome.html'
})
.state('app', {
abstract: true,
templateUrl: 'app.template.html' // This template contains the 3 different ui-views
})
// I'm using a different state here so I can set the navigation and header by default
.state('in-app', {
parent: 'app',
abstract: true,
views: {
'nav@app': { '...' },
'header@app': { '...' }
}
})
// In-app routes
.state('dashboard', {
parent: 'in-app',
url: '/app/dashboard'
views: {
'body@app': { '...' }
}
})
.state('users', {
parent: 'in-app',
url: '/app/users'
views: {
'body@app': { '...' }
}
})
.state('settings', {
parent: 'in-app',
url: '/app/settings'
views: {
'body@app': { '...' }
}
})
目前,这很好用,但是对于in-app routes
我想定义一个标题,该header@app
显示在header@app
视图中。
最好的方法是什么? 目前,我只能想到在$rootScope
上设置变量或发出事件。 但是对于这两个我都需要一个控制器。
有没有办法可以直接从我的路线配置中执行此操作?
UI-Router的示例应用程序使用以下代码:
.run(
[ '$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
// It's very handy to add references to $state and $stateParams to the $rootScope
// so that you can access them from any scope within your applications.For example,
// <li ng-class="{ active: $state.includes('contacts.list') }"> will set the <li>
// to active whenever 'contacts.list' or one of its decendents is active.
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}])
这就是说,具有data : {}
功能:
您可以将自定义数据附加到状态对象(我们建议使用data属性以避免冲突)。
// Example shows an object-based state and a string-based state
var contacts = {
name: 'contacts',
templateUrl: 'contacts.html',
data: {
customData1: 5,
customData2: "blue"
}
}
我们做得到:
.state('in-app', {
parent: 'app',
abstract: true,
views: {
'nav@app': { '...' },
'header@app': { '...' }
}
data: { title : "my title" },
})
并在一些模板中使用它,例如:
<div>{{$state.current.data.title}}</div>
一些总结。
data
声明更多自定义内容,并将其用作标题 ...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.