$viewContentLoading 不工作
$viewContentLoading is not working
I'm trying to log some value before content gets loaded. I'm using $viewContentLoading for this purpose which is getting called inside init function. But, value is not getting logged. Can anyone say what's wrong with my code.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($rootScope, $timeout, $q) {
function init() {
$rootScope.$on('$viewContentLoading', function(event, viewConfig)
{
alert("Hello");
console.log(33)
});
}
init();
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
</body>
</html>
我的意思是,这就是它目前的工作方式。回顾一下:
$viewContentLoading
播出
resolve 部分下的依赖关系已解决
控制器被实例化并解析注入的依赖项。
$viewContentLoaded 被发出。
控制器对 $viewContentLoaded 做出反应(当然,当它被设置为派发这些事件的委托时)。
我有一些视图需要一些时间才能从服务器加载数据(有时大约 1 秒),所以我想在从一条路线过渡到另一条路线时显示加载指示器。
我知道在加载数据时可以通过其他方式呈现它。但是,如果路由负责通过将控制器、模板和来自解析部分的数据放在一起来定义 UI 状态,我发现让它们通知任何想要收听它的人有关当前状态的信息是很自然的加载过程。
我的用例
我的用例是主从视图向下钻取交互。假设我设置了以下 ui-views。在这种情况下,详细视图是呈现用户名的集合视图的子视图。
+-----------------------------------------+
| user 1 | user 1 details view |
| user 2 | |
| user 3 | |
| user 4 | |
| user 5 | |
| user 6 | |
+-----------------------------------------+
也许我遗漏了一些东西,但是当我第一次指向浏览器时#/users/1 理想情况下我希望发生以下情况:
users parent route 解决了承诺并将结果注入到与该状态关联的控制器上。
集合视图在 users.show 仍然空闲时从服务器获取数据时被渲染(这是 API 调用,有时需要一秒钟的时间来加载)。
详细视图呈现加载指示器。
users.show 中的 resolve 部分最终从服务器获得 200 OK,在控制器中注入依赖项。
所以我终于可以渲染用户的细节了。example
I'm trying to log some value before content gets loaded. I'm using $viewContentLoading for this purpose which is getting called inside init function. But, value is not getting logged. Can anyone say what's wrong with my code.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($rootScope, $timeout, $q) {
function init() {
$rootScope.$on('$viewContentLoading', function(event, viewConfig)
{
alert("Hello");
console.log(33)
});
}
init();
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
</body>
</html>
我的意思是,这就是它目前的工作方式。回顾一下:
$viewContentLoading
播出
resolve 部分下的依赖关系已解决
控制器被实例化并解析注入的依赖项。
$viewContentLoaded 被发出。
控制器对 $viewContentLoaded 做出反应(当然,当它被设置为派发这些事件的委托时)。
我有一些视图需要一些时间才能从服务器加载数据(有时大约 1 秒),所以我想在从一条路线过渡到另一条路线时显示加载指示器。
我知道在加载数据时可以通过其他方式呈现它。但是,如果路由负责通过将控制器、模板和来自解析部分的数据放在一起来定义 UI 状态,我发现让它们通知任何想要收听它的人有关当前状态的信息是很自然的加载过程。
我的用例
我的用例是主从视图向下钻取交互。假设我设置了以下 ui-views。在这种情况下,详细视图是呈现用户名的集合视图的子视图。
+-----------------------------------------+
| user 1 | user 1 details view |
| user 2 | |
| user 3 | |
| user 4 | |
| user 5 | |
| user 6 | |
+-----------------------------------------+
也许我遗漏了一些东西,但是当我第一次指向浏览器时#/users/1 理想情况下我希望发生以下情况:
users parent route 解决了承诺并将结果注入到与该状态关联的控制器上。 集合视图在 users.show 仍然空闲时从服务器获取数据时被渲染(这是 API 调用,有时需要一秒钟的时间来加载)。 详细视图呈现加载指示器。 users.show 中的 resolve 部分最终从服务器获得 200 OK,在控制器中注入依赖项。 所以我终于可以渲染用户的细节了。example