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)
});

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

編輯：正如@MarkRajcok 指出的那樣，由於 javascript 的單線程性質，在$loading = true和$loading = false之間不會有渲染。 我添加了一個$timeout來推遲重載的執行並給蒙版一個渲染的機會。

小提琴：在這里工作小提琴確保在小提琴加載后按“運行”，它在第一次加載時不起作用，因為小提琴等待所有窗口完成。