$ применяются две операции, в которых один зависит от другого

Question

В моей угловой директиве, в обратный вызов, я призываю $apply к:

1. Набор $scope.model.something
2. Invoke $scope.onAction(), который использует model.something.

Я делаю это в одном $apply вызова, но в то время onAction() вызывается, model.something еще не определено.

В то же время, после $ apply, {{model.something}} имеет правильное значение, поэтому model.something обновляется правильно.

Я хочу установить model.something, поэтому я могу использовать его в onAction(). Как исправить следующий код?

Вот директива (я пропустил не соответствующий код):

.directive(function() { 
    return { 
    scope: { 
     ngModel: '=', 
     onAction: '=' 
    }, 
    compile: function (element, attrs) { 
     return function (scope) { 
     // This is some callback which is invoked 
     // outside of digest cycle. 
     function callback() { 
      // Here I want to set model and call onAction callback 
      scope.$apply(function() { 
      scope.ngModel = 'something'; 
      scope.onAction(); 
      }); 
     } 
     } 
    } 
    }; 
}) 

В то же время, мой контроллер выглядит следующим образом:

var MyController = function ($scope) { 
    $scope.model = {}; 

    $scope.onAction = function() { 
    // Here I want $scope.model.something to be set to "something" 
    // But it's undefined. 
    alert($scope.model.something); 
    }; 
} 

Наконец, HTML:

<div ng-controller="MyController"> 
    {{ model.something }} 
    <my-directive ng-model="model.something" on-action="onAction"/> 
</div> 

Еще одна вещь, я знаю, что могу просто позвонить scope.onAction('something'), я ищу другое решение.

Адрес the fiddle.

Answer 1

Вы можете просто обернуть каждую строку в собственный $ применяется обратный вызов:

compile: function (element, attrs, transclude) { 
    return function (scope, element, attrs) { 
    setTimeout(function() { 
     var something = 'lorem ipsum'; 
     scope.$apply(function() { 
     scope.ngModel = something; 
     }); 
     scope.$apply(function() { 
     scope.onAction(); 
     }); 
    }, 200); 
    }; 
} 

Fiddle

Answer 2

Использование $timeout:

$timeout(function(){ 
    scope.onAction(something); 
}); 

Или используйте $watch:

scope.$watch("ngModel",function(){ 
    scope.onAction(something); 
});