[TOC] # 狀態嵌套的方法 ## 狀態可以相互嵌套。有三個嵌套的方法【推薦使用點語法】： * 使用“點標記法”，例如：.state('contacts.list', {}) * 使用parent屬性，指定一個父狀態的名稱字符串，例如：parent: 'contacts' * 使用parent屬性，指定一個父狀態對象，例如：parent: contacts（contacts 是一個狀態對象） 嵌套狀態和視圖 # 子狀態將從父狀態繼承哪些屬性？ ## 子狀態將從父母繼承以下屬性： * 通過解決器解決的依賴注入項 * 自定義的data屬性 * 除了這些，沒有其他屬性繼承下來（比如controllers、templates和url等） # 案例 【config】 ~~~ angular.module('myapp').config(function ($stateProvider, $urlRouterProvider,basePathProvider){ //父路由狀態 $stateProvider.state('home', { templateUrl: basePathProvider.getPath('homeTpl.html'), resolve: {}, controller: 'homeTplCtrl', onEnter: function () { }, onExit: function () { }, }); //子路由狀態 $stateProvider.state('home.aaa', { templateUrl: basePathProvider.getPath('homeTpl.aaa.html'), resolve: {}, controller: '', onEnter: function () { }, onExit: function () { }, }); //子路由狀態 $stateProvider.state('home.bbb', { templateUrl: basePathProvider.getPath('homeTpl.bbb.html'), resolve: {}, controller: '', onEnter: function () { }, onExit: function () { }, }); //子路由狀態 $stateProvider.state('home.ccc', { templateUrl: basePathProvider.getPath('homeTpl.ccc.html'), resolve: {}, controller: '', onEnter: function () { }, onExit: function () { }, }); }); ~~~ 【父路由狀態控制器homeTplCtrl.js】 ~~~ angular.module('myapp').controller('homeTplCtrl', function ($scope) { $scope.data='aaaaaaaaaaaaaaaaaaaaaaaaa'; }); ~~~ 【父路由模板homeTpl.html】 ~~~ <h1>home</h1> <p>{{data}}</p> <hr> <p ui-sref=".aaa">aaaa</p> <p ui-sref=".bbb">bbbb</p> <p ui-sref=".ccc">cccc</p> <hr> <div ui-view></div> ~~~ 【子路由模板homeTpl.aaa.html】 ~~~ <h1>aaaa</h1> <!--繼承父路由狀態控制器的data數據--> <p>{{data}}</p> ~~~ 【子路由模板homeTpl.bbb.html】 ~~~ <h1>bbbb</h1> ~~~ 【子路由模板homeTpl.ccc.html】 ~~~ <h1>cccc</h1> ~~~