[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> ~~~