AngularJS директива гонка состояние (порядок слушателей?)

Question

У меня есть настраиваемая директива, которая слушает, чтобы изменять события на входах, которые пузырятся (используя функцию jQuery delegate). У меня проблема, когда слушатель запускается до обновления ng-моделей (в Chrome), что означает, что данные устарели в моей директиве. Кажется, он работает в Firefox. Это связано с приложением слушателей? Пример:

HTML-:

<div my:change="myChange()"> 
    <input type="checkbox" ng:change="ngChange()" ng:model="foo" ng:true-value="foo" ng:false-value="bar" /> 
</div> 

И JS:

app.controller('MainCtrl', function($scope) { 

    $scope.foo = 'foo'; // Source 
    $scope.bar = 'foo' // w/o $timeout 
    $scope.bar2 = 'foo' // with $timout 

    $scope.ngChange = function() { 

    console.log('ngChange'); 
    } 

}) 
.directive('myChange', ['$timeout', function($timeout) { 
    return { 
    link: function($scope, $element, $attrs) { 

    $element.delegate('input', 'change', function(event) { 

     console.log('myChange') 

     // A value was changed, let's update the value from the model. 
     $timeout(function() { 
     $scope.bar2 = $scope.foo; 
     }) 

     $scope.bar = $scope.foo; 
    }) 
    } 
    } 

}]); 

Когда флажок $scope.foo должен быть обновлен. ngChange вызывается первым в FF, второй в Chrome, где myChange вызывается первым Chrome и вторым в FF.

Добавление вызова $timeout заставляет его работать должным образом ($scope.foo имеет значение, которое я ожидаю), но это похоже на крупный взлом.

Рабочая plunkr кода выше: http://plnkr.co/edit/Y1TWGKlkimS3H5Lqaisw

Answer 1

вы пробовали изменения $ элемента $ ($ элемент)? См. Ниже ...

app.controller('MainCtrl', function($scope) { 

    $scope.foo = 'foo'; // Source 
    $scope.bar = 'foo' // w/o $timeout 
    $scope.bar2 = 'foo' // with $timout 

    $scope.ngChange = function() { 

    console.log('ngChange'); 
    } 

}) 
.directive('myChange', ['$timeout', function($timeout) { 
    return { 
    link: function($scope, $element, $attrs) { 

    $($element).delegate('input', 'change', function(event) { 

     console.log('myChange') 

     // An value was changed, let's update the value from the model. 
     $timeout(function() { 
     $scope.bar2 = $scope.foo; 
     }) 

     $scope.bar = $scope.foo; 
    }) 
    } 
    } 

}]);