利用Angularjs中模块ui(3)

<span><span>function</span> <span>Ctrl</span><span>(<span>$state</span>)</span></span>{ console.log(<span>$state</span>.current.data.customData1) <span>// 输出 5;</span> console.log(<span>$state</span>.current.data.customData2) <span>// 输出 "blue";</span> }

onEnter 和 onExit 回调函数

onEnter和onExit回调函数是可选配置项，分别称为当一个状态变得活跃的和不活跃的时候触发。回调函数也可以访问所有解决依赖项。

$stateProvider.state(<span>"contacts"</span>, { template: <span>'&lt;h1&gt;{{title}}&lt;/h1&gt;'</span>, resolve: { title: <span>'My Contacts'</span> }, controller: <span>function</span>($scope, title){ $scope.title = <span>'My Contacts'</span>; }, // title 是解决依赖项，这里也是可以使用解决依赖项的 onEnter: <span>function</span>(title){ <span>if</span>(title){ <span>...</span> do something <span>...</span> } }, // title 是解决依赖项，这里也是可以使用解决依赖项的 onExit: <span>function</span>(title){ <span>if</span>(title){ <span>...</span> do something <span>...</span> } } })

State Change Events 状态改变事件

所有这些事件都是在$rootScope作用域触发

$stateChangeStart – 当模板开始解析之前触发

$rootScope.$on(<span>'$stateChangeStart'</span>, <span>function</span>(event, toState, toParams, fromState, fromParams){ <span>...</span> })

注意：使用event.preventDefault()可以阻止模板解析的发生

<span>$rootScope</span>.<span>$on</span>(<span>'$stateChangeStart'</span>, <span><span>function</span><span>(event, toState, toParams, fromState, fromParams)</span></span>{ event.preventDefault(); <span>// transitionTo() promise will be rejected with </span> <span>// a 'transition prevented' error</span> })

$stateNotFound – v0.3.0 – 在 transition 时通过状态名查找状态，当状态无法找到时发生。该事件在 scope 链上广播，只允许一次处理错误的机会。unfoundState将作为参数传入事件监听函数，下面例子中可以看到unfoundState的三个属性。使用 event.preventDefault() 来阻止模板解析.

// somewhere, assume lazy.<span>state</span> has not been defined <span>$state</span>.go(<span>"lazy.state"</span>, {a:<span>1</span>, b:<span>2</span>}, {inherit:false}); // somewhere else <span>$scope</span>.<span>$on</span>('<span>$stateNotFound</span>', function(event, unfoundState, <span>from</span>State, <span>from</span>Params){ console.<span>log</span>(unfoundState.<span>to</span>); // <span>"lazy.state"</span> console.<span>log</span>(unfoundState.<span>to</span>Params); // {a:<span>1</span>, b:<span>2</span>} console.<span>log</span>(unfoundState.options); // {inherit:false} + <span>default</span> options })

$stateChangeSuccess – 当模板解析完成后触发

$rootScope.$on(<span>'$stateChangeSuccess'</span>, <span>function</span>(event, toState, toParams, fromState, fromParams){ <span>...</span> })

$stateChangeError – 当模板解析过程中发生错误时触发

$rootScope.$on(<span>'$stateChangeError'</span>, <span>function</span>(event, toState, toParams, fromState, fromParams, error){ <span>...</span> })

View Load Events 视图加载事件

$viewContentLoading – 当视图开始加载，DOM渲染完成之前触发，该事件将在$scope链上广播此事件。

<span>$scope</span>.<span>$on</span>(<span>'$viewContentLoading'</span>, <span><span>function</span><span>(event, viewConfig)</span></span>{ <span>// Access to all the view config properties.</span> <span>// and one special property 'targetView'</span> <span>// viewConfig.targetView </span> });

$viewContentLoaded – 当视图加载完成，DOM渲染完成之后触发，视图所在的$scope发出该事件。