Page 363 - AngularJS权威教程

25.3 ui-router 343

在应用程序内可以通过监听$scope对象的方式附加函数给这些事件。以下所有事件都会触发 19
在$ootScope上，因此可以在任意$scope对象上监听这些事件。
1. 状态改变事件 20

可以使用如下方式监听这个事件：
21
$scope.$on('$stateChangeStart',
function(evt, toState, roParams, fromState, fromParams) {
// 可以阻止这一状态完成
evt.preventDefault(); 22
});
这个事件可能会以如下方式触发。
23
$stateChangeStart 从一个状态开始过渡到另一个状态时触发这个事件。

$stateChangeSuccess 从一个状态过渡到下一个状态完成时触发这个事件。 24
$stateChangeError 当过渡期间发生错误时触发这个事件。通常，模板不能被解析或者解析
promise失败时会引发错误。 25

2. 视图加载事件
26
ui-router还在视图加载阶段提供了事件。

$viewContentLoading 视图开始加载时，DOM被渲染之前，触发这个事件。
27
你可以像这样监听这个事件：

$scope.$on('$viewContentLoading', 28
function(event, viewConfig) {
// 在这里可以访问所有视图配置属性
// 以及一个特殊的“targetView”属性 29
// viewConfig.targetView
});

$viewContentLoaded 在视图加载完成以及DOM渲染之后触发这个事件。 30

25.3.3 $stateParams 31

在上面的例子中，我们一直用$stateParams从URL的参数中辨别出不同的参数选项。这个
服务展示了如何根据URL的不同组成部分处理数据。 32

例如，如果在inbox状态中有个看起来像这样的URL：
33
url: 'inbox/:inboxId/messages/{sorted}}?from&to'
然后用户到达这个路由：
34
/inbox/123/messages/ascending?from=10&to=20
那么$stateParams对象的结果就是：
35
{inboxId: '123', sorted: 'ascending', from: 10, to: 20}
36