Question

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

在derictive中，我会观察变量数据并相应地更新元素。但是，我遇到了“$ digest已在进行中”的问题，导致derective未正确更新。我已经找到了很多关于$ 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);
            });
        }
    };
});

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

1 个答案: