javascript - AngularJS模型绑定查看后如何触发事件

Question

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

我正在考虑在 AngularJS 应用新模型进行查看时显示一个蒙版 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)
});

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

编辑：$loading = true正如@MarkRajcok 指出的那样，$loading = false由于javascript的单线程性质，两者之间不会有渲染。我添加了一个$timeout来推迟重载的执行并给蒙版一个渲染的机会。

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