AngularJS模型绑定查看后如何触发事件答案

【问题标题】：How to trigger an event after AngularJS model has been bound to viewAngularJS模型绑定查看后如何触发事件
【发布时间】：2013-05-19 06:16:46
【问题描述】：

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

我正在考虑在 AngularJS 应用新模型进行查看时显示一个蒙版 div。有没有办法做到这一点？

基本上我希望在 AngularJS 完成将新模型应用到 HTML 视图时收到通知。

谢谢

【问题讨论】：

标签： javascript html angularjs binding

【解决方案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)
});

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

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

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

【讨论】：

由于 JavaScript 本质上是单线程的，Angular 不会更新 $scope.loading = true; 和 $scope.loading = false; 行之间的视图，所以我认为这不会起作用。
@MarkRajcok 哦，好点。也许这可以通过使用 $timeout 来实现，我将不得不重新考虑它。
是的。我想在控制器内做到这一点。我会试试看。谢谢
但为了澄清，这不是HeavyLoading。它应该是HeavyBinding。我正在尝试将一个非常重的实体绑定到 angularjs 视图。我怀疑延迟是由于绑定而不是加载此实体引起的，因为我可以确保掩码在加载之后和绑定之前显示自身。但以前我在加载完成后无法控制。我想亲自参与实体的绑定过程。