AngularJS从AJAX回调更新值

Question

当我直接更新范围值时,它在视图中更新很好,但是当从AJAX回调更新此值时它不会更新.这是简化的例子 - http://jsfiddle.net/hS8Bs/1/

我怎么能绕过它呢？

更新:我注意到在链接上第二次点击会更新值,但这不是我想要的.

Answer 1

真正的问题是缺乏$scope.$apply.当你在角度摘要之外更新角度模型时,你应该使用apply.

$.getJSON('/echo/json/', {}, function(data){
    $scope.$apply(function(){
        $scope.period = '2010 - 2011';
    });
}); 

这将触发diggest以查看更新,如果您的apply中的代码抛出异常,它将被重定向到$exceptionHandler服务.

Answer 2

这是所选答案的一个插件,我发现当我实现$ apply()函数时,Angular JS仍称为"Error:$ digest已在进行中".

所以我在这篇文章中找到了Will Vincent的代码: AngularJS:与表单交互的Angular方式是什么？ ,它检查正在进行的$ digest,并且只在安全时调用$ apply():

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

所以它会是这样的:

$scope.safeApply(function() { ...code here... });