狀態嵌套的方法
狀態可以相互嵌套。有三個嵌套的方法：
點標記法
在$stateProvider中可以使用點語法來表示層次結構，下面，contacts.list是contacts的子狀態。
$stateProvider .state('contacts', {}) .state('contacts.list', {});使用parent屬性，指定一個父狀態的名稱字符串
$stateProvider .state('contacts', {}) .state('list', { parent: 'contacts' });基于對象的狀態
如果你不喜歡使用基于字符串的狀態，您還可以使用基于對象的狀態。name屬性將在狀態對象內部設置，在所有的子狀態對象中設置parent屬性為父狀態對象，像下面這樣：
var contacts = { name: 'contacts', //mandatory templateUrl: 'contacts.html'}var contactsList = { name: 'list', //mandatory parent: contacts, //mandatory templateUrl: 'contacts.list.html'}$stateProvider .state(contacts) .state(contactsList)$state.transitionTo(states.contacts);在方法調用和屬性比較時可以直接引用狀態對象：
$state.current === states.contacts;$state.includes(states.contacts)
注冊狀態的順序
可以以任何順序和跨模塊注冊狀態，也可以在父狀態存在之前注冊子狀態。一旦父狀態被注冊，將觸發自動排序，然后注冊子狀態。
狀態命名
狀態不允許重名，當使用“點標記法”，parent屬性被推測出來，但這并不會改變狀態的名字；當不使用“點標記法”時，parent屬性必須明確指定，但你仍然不能讓任何兩個狀態有相同的名稱，例如你不能有兩個不同的狀態命名為”edit”，即使他們有不同的父狀態。
嵌套狀態和視圖
當應用程序在一個特定的狀態 - 當一個狀態是活動狀態時 - 其所有的父狀態都將成為活躍狀態。下面例子中，當”contacts.list”是活躍狀態時，”contacts”也將隱性成為活躍狀態，因為他是”contacts.list”的父狀態。
子狀態將把其對應的模板加載到父狀態對應模板的ui-view中。
$stateProvider .state('contacts', { templateUrl: 'contacts.html', controller: function($scope){ $scope.contacts = [{ name: 'Alice' }, { name: 'Bob' }]; } }) .state('contacts.list', { templateUrl: 'contacts.list.html' });function MainCtrl($state){ $state.transitionTo('contacts.list');}<!-- index.html --><body ng-controller="MainCtrl"> <div ui-view></div></body>
<!-- contacts.html --><h1>My Contacts</h1><div ui-view></div>
<!-- contacts.list.html --><ul> <li ng-repeat="contact in contacts"> <a>{{contact.name}}</a> </li></ul>子狀態將從父狀態繼承哪些屬性？
子狀態將從父母繼承以下屬性：
除了這些，沒有其他屬性繼承下來（比如controllers、templates和url等）
繼承解決的依賴項
版本 v0.2.0 的新特性
子狀態將從父狀態繼承通過解決器解決的依賴注入項，并且可以重寫（overwrite）依賴項，可以將解決依賴項注入子狀態的控制器和解決函數中。
$stateProvider.state('parent', { resolve:{ resA: function(){ return {'value': 'A'}; } }, controller: function($scope, resA){ $scope.resA = resA.value; } }) .state('parent.child', { resolve:{ // 將父狀態的解決依賴項注入到子狀態的解決函數中 resB: function(resA){ return {'value': resA.value + 'B'}; } }, // 將父狀態的解決依賴項注入到子狀態的控制器中 controller: function($scope, resA, resB){ $scope.resA2 = resA.value; $scope.resB = resB.value; }繼承自定義data屬性值
子狀態將從父狀態繼承自定義data屬性值，并且可以重寫（overwrite）data屬性值
$stateProvider.state('parent', { data:{ customData1: "Hello", customData2: "World!" } }) .state('parent.child', { data:{ // customData1 inherited from 'parent' // 覆蓋了 customData2 的值 customData2: "UI-Router!" } });$rootScope.$on('$stateChangeStart', function(event, toState){ var greeting = toState.data.customData1 + " " + toState.data.customData2; console.log(greeting); // 'parent'被激活時，輸出 "Hello World!" // 'parent.child'被激活時，輸出 "Hello UI-Router!"})Abstract States 抽象狀態
一個抽象的狀態可以有子狀態但不能顯式激活，它將被隱性激活當其子狀態被激活時。
下面是一些你將可能會使用到抽象狀態的示例：
請記住：抽象的狀態模板仍然需要<ui-view/>，來讓自己的子狀態模板插入其中。因此，如果您使用抽象狀態只是為了預提供基url、提供解決依賴項或者自定義data、運行onEnter/Exit函數，你任然需要設置template: "<ui-view/>"。
抽象狀態使用示例：
為子狀態提供一個基url，子狀態的url是相對父狀態的
$stateProvider .state('contacts', { abstract: true, url: '/contacts', // Note: abstract still needs a ui-view for its children to populate. // You can simply add it inline here. template: '<ui-view/>' }) .state('contacts.list', { // url will become '/contacts/list' url: '/list' //...more }) .state('contacts.detail', { // url will become '/contacts/detail' url: '/detail', //...more })將子狀態模板插入到父狀態指定的ui-view中
$stateProvider .state('contacts', { abstract: true, templateURL: 'contacts.html' ) .state('contacts.list', { // loaded into ui-view of parent's template templateUrl: 'contacts.list.html' }) .state('contacts.detail', { // loaded into ui-view of parent's template templateUrl: 'contacts.detail.html' })<!-- contacts.html --><h1>Contacts Page</h1><div ui-view></div>
完整示例
$stateProvider .state('contacts', { abstract: true, url: '/contacts', templateUrl: 'contacts.html', controller: function($scope){ $scope.contacts = [{ id:0, name: "Alice" }, { id:1, name: "Bob" }]; } }) .state('contacts.list', { url: '/list', templateUrl: 'contacts.list.html' }) .state('contacts.detail', { url: '/:id', templateUrl: 'contacts.detail.html', controller: function($scope, $stateParams){ $scope.person = $scope.contacts[$stateParams.id]; } })<!-- contacts.html --><h1>Contacts Page</h1><div ui-view></div>
<!-- contacts.list.html --><ul> <li ng-repeat="person in contacts"> <a ng-href="#/contacts/{{person.id}}" rel="external nofollow" >{{person.name}}</a> </li></ul><!-- contacts.detail.html --><h2>{{ person.name }}</h2>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
