Директива не обновляется из-за «$ digest уже выполняется»

Question

В моем контроллере я установил переменную «данные» в значение по умолчанию. В моем исходном проекте я использую CouchCorner для извлечения данных из CouchDB и обновления данных.

В пределах раздумий я наблюдаю за переменными данными и соответствующим образом обновляю элемент. Тем не менее, я столкнулся с проблемой «$ digest уже в процессе», что приводит к тому, что редуктор не обновляется правильно. Я уже нашел много информации о проблеме $ digest, но я не мог найти ответа, который бы соответствовал моей проблеме.

Я создал следующий jsFiddle, который использует $ таймаут вместо фактического запроса 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); 
      }); 
     } 
    }; 
}); 

Скрипт изменяет начальное значение «данные» в «Обновление» после 1мс. Но директива не обновляется, хотя функция $ watch выполняется. Интересно, если я удалю предупреждение(), все будет работать так, как ожидалось.

Как я могу избежать столкновения $ 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); 
      }); 
     } 
    }; 
});