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 上的问题