angular.js - 使用angularjs，如何在document ready中修改model，並且使得與model綁定的dom被更新？

Question

下面的例子中，model被修改了，但是介面沒被更新
範例：
http://jsbin.com/relanafohu/4/edit

Answer 1

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply

Answer 2

所有非Angular可知的非同步操作回呼中的 model 修改都需要使用 apply 方法來顯性地通知angular進行視圖的更新，具體看 angular關於 apply 的文檔。

另外如果 angular 正在進行一次更新的過程中（digest circle），apply被調用，那麼會出現下面這樣的報錯：

Error: $apply already in progress

為了避免這個錯誤，你可以先判斷目前的狀態，可以直接使用下面這個封裝好的方法：

jssafeApply = function( scope, fn) {
    var phase = scope.$root.$$phase;
    if(phase == '$apply' || phase == '$digest') {
        if(fn && (typeof(fn) === 'function')) { fn();
        }
    } else {
        scope.$apply(fn);
    }
}

當你需要設定model的時候只需要：

jssafeApply( $scope, function(){
    // 在这里写你修改model的代码
});

關於這個錯誤的更多細節可以查看這個 stackoverflow 上的問題