Question

我正在开发一个应用程序，我有多个嵌套视图，它们看起来像这样：

- 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视图中显示的标题。
最好的方法是什么？目前我只能考虑在$rootScope上设置变量，或发送事件。但对于这两个我需要一个控制器。

有没有办法直接从我的路线配置中做到这一点？

Answer 1

UI-Router的示例应用程序使用以下代码：

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;
}])

这意味着，使用data : {}功能：

Attach Custom Data to State Objects

您可以将自定义数据附加到状态对象（我们建议使用数据属性以避免冲突）。

// 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>

一些总结。

我们可以将状态和参数放到$ rootScope中，这样我们就可以在没有任何控制器的情况下访问它。
我们可以通过data声明更多自定义内容并将其用作标题 ... anyhwere

嵌套视图中的Angular ui-router变量

1 个答案:

ui-router / sample / app / app.js

Attach Custom Data to State Objects