[绑定AngularJS模型后如何触发事件

Question

当我为AngularJS模型分配新值时，我注意到在用新模型的数据刷新页面之前有一点延迟。特别是在模型非常胖的情况下，会发生这种情况。

我正在考虑在AngularJS将新模型应用于视图时显示mask div。有办法吗？

基本上，我想在AngularJS完成将新模型应用于HTML视图时得到通知。

谢谢

Answer 1

假设您正在控制器内部进行此工作，一种选择是在掩蔽元素上使用ng-show伪指令，如：

<div ng-controller="someCtrl">
    <div ng-show="loading">I'm a mask</div>
</div>

在您的应用中：

myApp.controller('someCtrl',function($scope,$timeout){
    function doHeavyLoading(){
        // do the loading here
        $scope.loading = false;
    }
    $scope.loading = true;
    $timeout(doHeavyLoading, 0)
});

这也可以在指令的控制器内完成。

Edit：正如@MarkRajcok所指出的，由于javascript的单线程特性，在$loading = true和$loading = false之间将没有渲染。我添加了$timeout来推迟执行繁重的工作，并给遮罩一个渲染的机会。

Fiddle： Working fiddle here确保在加载小提琴后按“运行”，因为第一次加载小提琴会等待所有窗口完成，所以它在第一次加载时将不起作用。