我们有一个大型模型,需要花费几秒钟才能将模型中的所有项绑定到表单上。我们希望在这个过程中显示一个旋转图标(spinner)。是否有一些事件会在绑定完成时触发,以便我们知道何时隐藏旋转图标?
我们有一个大型模型,需要花费几秒钟才能将模型中的所有项绑定到表单上。我们希望在这个过程中显示一个旋转图标(spinner)。是否有一些事件会在绑定完成时触发,以便我们知道何时隐藏旋转图标?
Plunkr: http://plnkr.co/edit/GzzTW4?p=preview
如果您使用的是版本1.2,请在旋转图标上使用ng-if
,否则请使用ng-show
。
<div ng-controller="Ctrl">
<div ng-show="complete">Complete={{complete}}</div>
<div class="thing" ng-repeat="thing in things" my-post-repeat-directive>
thing {{thing}}
</div>
</div>
在您的指令中使用 $last 来判断渲染是否完成,然后更改您在 ng-show/ng-if 中定义的变量。function Ctrl($scope) {
$scope.complete=false;
$scope.doComplete = function() {
$scope.complete = true;
}
$scope.things = [
'A', 'B', 'C'
];
}
angular.module('myApp', [])
.directive('myPostRepeatDirective', function() {
return function(scope, element, attrs) {
if (scope.$last) {
scope.$eval('doComplete()');
}
};
});
关于 $timeout:
此服务只是 $timeout 服务的简单装饰器,添加了 "flush" 和 "verifyNoPendingTasks" 方法。
关于 $viewContentLoaded:
在视图加载后、DOM 渲染完成后触发。视图的 '$scope' 发出该事件。
我的个人用例是为 paymentForm 动态生成其隐藏输入(使用通过 ng-bind-html 插入的服务器端计算的 HTML 数据),并提交到支付网关:
$scope.$on('$viewContentLoaded', function() {
$timeout(function () {
$scope.paymentForm.submit();
});
});
$last
项的编译/链接函数,并向作用域触发自定义事件。<!-- In your HTML -->
<div class="spinner" ng-show="submitting">
<div ng-repeat="p in people">
{{p.name}}
</div>
//In Javascript
$scope.submitting = true;
$scope.load_data = function(){
$http.get('/api/route')
.then(function(success){
$scope.submitting = false;
},function(error){
console.log(error);
});
}
希望这能有所帮助。