嵌套视图中的 Angular ui-router 变量 [英] Angular ui-router variable in nested view
问题描述
我目前正在开发一个有多个嵌套视图的应用,它们看起来像这样:
- ui-view- ui-view="header"- ui-view="导航"- ui-view="body"
我的状态定义如下:
.state('index', {url: '',//默认路由模板网址:'welcome.html'}).state('应用程序', {摘要:真实,templateUrl: 'app.template.html'//该模板包含 3 个不同的 ui-views})//我在这里使用不同的状态,所以我可以默认设置导航和标题.state('in-app', {父:'应用',摘要:真实,意见:{'nav@app': { '...' },'header@app': { '...' }}})//应用内路由.state('仪表板', {父级:应用内",网址:'/应用程序/仪表板'意见:{'body@app': { '...' }}}).state('用户', {父级:应用内",网址:'/应用程序/用户'意见:{'body@app': { '...' }}}).state('设置', {父级:应用内",网址:'/应用程序/设置'意见:{'body@app': { '...' }}})
目前这很好用,但对于 in-app 路由
,我想定义一个显示在 header@app
视图中的标题.
什么是最好的方法来做到这一点?目前我只能想到在 $rootScope
上设置一个变量,或者发送一个事件.但对于这两种情况,我都需要一个控制器.
有没有办法直接从我的路由配置中做到这一点?
UI-Router 的示例应用,使用此代码:
ui-router/示例/应用程序/app.js
.run([ '$rootScope', '$state', '$stateParams',函数($rootScope,$state,$stateParams){//将 $state 和 $stateParams 的引用添加到 $rootScope 中非常方便//以便您可以从应用程序中的任何范围访问它们.例如,//<li ng-class="{ active: $state.includes('contacts.list') }">将设置 <li>//每当contacts.list"或其后代之一处于活动状态时就处于活动状态.$rootScope.$state = $state;$rootScope.$stateParams = $stateParams;}])
这意味着,使用 data : {}
功能:
将自定义数据附加到状态对象
<块引用>您可以将自定义数据附加到状态对象(我们建议使用数据属性以避免冲突).
//示例显示基于对象的状态和基于字符串的状态var 联系人 = {name: '联系人',templateUrl: 'contacts.html',数据: {自定义数据1:5,customData2:蓝色"}}
我们可以这样做:
.state('in-app', {父:'应用',摘要:真实,意见:{'nav@app': { '...' },'header@app': { '...' }}数据:{标题:我的标题"},})
并在一些模板中使用它,例如:
{{$state.current.data.title}}
一些总结.
- 我们可以将 state 和 params 放入 $rootScope 中,这样我们就可以在没有任何控制器的情况下访问它.
- 我们可以通过
data
声明更多自定义内容并将其用作 title ... anyhwere
I'm currently working on an app where I have multiple nested views, they sort of look like this:
- ui-view
- ui-view="header"
- ui-view="nav"
- ui-view="body"
My states are defined as follows:
.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': { '...' }
}
})
At the moment this works great, but for the in-app routes
I would like to define a title that is displayed in the header@app
view.
What would be the best way to do this? At the moment I can only think of either setting a variable on the $rootScope
, or sending out an event. But for both of those I would need a controller.
Is there a way I could do this directly from my routes config?
The sample applicaiton of the UI-Router, uses this code:
ui-router / sample / app / app.js
.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;
}])
And that means, that with data : {}
feature:
Attach Custom Data to State Objects
You can attach custom data to the state object (we recommend using a data property to avoid conflicts).
// Example shows an object-based state and a string-based state
var contacts = {
name: 'contacts',
templateUrl: 'contacts.html',
data: {
customData1: 5,
customData2: "blue"
}
}
we can do this:
.state('in-app', {
parent: 'app',
abstract: true,
views: {
'nav@app': { '...' },
'header@app': { '...' }
}
data: { title : "my title" },
})
And use it in some template like:
<div>{{$state.current.data.title}}</div>
Some summary.
- We can place state and params into $rootScope, so we can access it without any controller anyhwere.
- We can declare some more custom stuff via
data
and use it as a title ... anyhwere
这篇关于嵌套视图中的 Angular ui-router 变量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!