由于“$digest 已在进行中”，指令未更新

Question

在我的控制器中，我将变量“数据”设置为默认值。在我的原始项目中，我使用CouchCorner 从 CouchDB 中获取数据并更新数据。

在一个衍生词中，我观察变量数据并相应地更新元素。 但是，我遇到了“$digest 已经在进行中”的问题，导致指令没有正确更新。我已经找到了很多关于 $digest 问题的信息，但是我找不到任何适合我的问题的答案。

我创建了以下 jsFiddle，它使用 $timeout 而不是实际的 CouchDB 请求： http://jsfiddle.net/cwesM/4/

var App = angular.module('myApp', []);

function Ctrl($scope, $timeout) {
$scope.data="Initial";

$timeout(function(){
    $scope.data="Updated"}, 1)
}

App.directive('chart', function(){
    return{
        restrict: 'E',
        link: function(scope, elem, attrs){
            scope.$watch(attrs.ngModel, function(v){
                alert(v)
                elem.html("Data="+v);
            });
        }
   };
});

脚本在 1ms 后将“data”的初始值更改为“Updated”。但是指令没有更新，尽管 $watch 函数被执行了。 有趣的是，如果我删除 alert()，一切都会按预期进行。

如何避免 $digest 的冲突？

Answer 1

您可以使用在 stackoverflow.com/a/17510699 上发布的解决方案（由 @Dor Cohen 回答）。

我帮你把它和你当前的代码放在一起。

var App = angular.module('myApp', []);

function Ctrl($scope, $timeout) {
    $scope.data = "Initial";
    $timeout(function () {
        $scope.data = "Updated"
    }, 1);

    $scope.alert = function (info) {
        alert(info);
    }

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

App.directive('chart', function () {
    return {
        restrict: 'E',
        link: function (scope, elem, attrs) {
            scope.$watch(attrs.ngModel, function (v) {
                scope.safeApply(function () {
                    alert(v);
                });
                elem.html("Data=" + v);
            });
        }
    };
});