Как реализовать ng-change для пользовательской директивы

Если вам требуется ngModel, вы можете просто вызвать $setViewValue для ngModelController, который неявно оценивает ng-change. Четвертым параметром функции связывания должен быть ngModelCtrl. Следующий код заставит ng-change работать для вашей директивы.

link : function(scope, element, attrs, ngModelCtrl){
    scope.updateModel = function(item) {
        ngModelCtrl.$setViewValue(item);
    }
}

Чтобы ваше решение работало, удалите ngChange и ngModel из изолированной области действия myDirective.

Вот пример: http://plnkr.co/edit/UefUzOo88MwOMkpgeX07?p=preview

тл;др

По моему опыту, вам просто нужно наследовать от ngModelCtrl. выражение ng-change будет автоматически оцениваться при использовании метода ngModelCtrl.$setViewValue

angular.module("myApp").directive("myDirective", function(){
  return {
    require:"^ngModel", // this is important, 
    scope:{
      ... // put the variables you need here but DO NOT have a variable named ngModel or ngChange 
    }, 
    link: function(scope, elt, attrs, ctrl){ // ctrl here is the ngModelCtrl
      scope.setValue = function(value){
        ctrl.$setViewValue(value); // this line will automatically eval your ng-change
      };
    }
  };
});

Точнее

ng-change оценивается во время ngModelCtrl.$commitViewValue() IF, когда ссылка на объект вашей ngModel изменилась. метод $commitViewValue() автоматически вызывается $setViewValue(value, trigger), если вы не используете аргумент триггера или не указали какие-либо ngModelOptions.

Я указал, что ng-change будет автоматически запускаться, если ссылка на $viewValue изменится. Если ваш ngModel — это string или int, вам не о чем беспокоиться. Если ваш ngModel является объектом и вы просто меняете некоторые его свойства, то $setViewValue не будет оцениваться ngChange.

Если взять пример кода из начала поста

scope.setValue = function(value){
    ctrl.$setViewValue(value); // this line will automatically evalyour ng-change
};
scope.updateValue = function(prop1Value){
    var vv = ctrl.$viewValue;
    vv.prop1 = prop1Value;
    ctrl.$setViewValue(vv); // this line won't eval the ng-change expression
};

После некоторых исследований кажется, что лучший подход — использовать $timeout(callback, 0).

Он автоматически запускает цикл $digest сразу после выполнения обратного вызова.

Итак, в моем случае решение заключалось в использовании

$timeout(scope.ngChange, 0);

Таким образом, не имеет значения, какова подпись вашего обратного вызова, он будет выполняться так, как вы определили его в родительской области.

Вот plunkr с такими изменениями: http://plnkr.co/edit/9MGptJpSQslk8g8tD2bZ?p=preview

Ответы Samuli Ulmanen и lucienBertin прибивают это, хотя небольшое дополнительное чтение в документации AngularJS дает дополнительные советы о том, как справиться с этим (см. https://docs.angularjs.org/api/ng/type/ngModel.NgModelController).

В частности, в тех случаях, когда вы передаете объекты в $setViewValue(myObj). Документация AngularJS гласит:

При использовании со стандартными входными данными значение представления всегда будет строкой (которая в некоторых случаях преобразуется в другой тип, например объект Date для input[date].) Однако пользовательские элементы управления также могут передавать объекты этому методу. В этом случае мы должны сделать копию объекта, прежде чем передавать его в $setViewValue. Это связано с тем, что ngModel не выполняет глубокое наблюдение за объектами, а только ищет изменение личности. Если вы измените только свойство объекта, то ngModel не поймет, что объект изменился, и не будет вызывать пайплайны $parsers и $validators. По этой причине не следует изменять свойства копии после ее передачи в $setViewValue. В противном случае вы можете привести к неправильному изменению значения модели в осциллографе.

В моем конкретном случае моя модель представляет собой объект даты момента, поэтому я должен сначала клонировать объект, а затем вызывать setViewValue. Мне здесь повезло, так как момент предоставляет простой метод клонирования: var b = moment(a);

link : function(scope, elements, attrs, ctrl) {
    scope.updateModel = function (value) {
        if (ctrl.$viewValue == value) {
            var copyOfObject = moment(value);
            ctrl.$setViewValue(copyOfObject);
        }
        else
        {
            ctrl.$setViewValue(value);
        }
    };
}

Фундаментальная проблема здесь заключается в том, что базовая модель не обновляется до тех пор, пока цикл дайджеста, который происходит после завершения выполнения scope.updateModel. Если функции ngChange требуются сведения о выполняемом обновлении, то эти сведения можно явно сделать доступными для ngChange, а не полагаться на ранее примененное обновление модели.

Это можно сделать, предоставив карту имен локальных переменных для значений при вызове ngChange. В этом сценарии вы можете сопоставить новое значение модели с именем, на которое можно сослаться в выражении ng-change.

Например:

scope.updateModel = function(item)
{
    scope.ngModel = item;
    scope.ngChange({newValue: item});
}

В HTML:

<my-directive ng-model="foo" items=items ng-change="bar(newValue)"></my-directive>

См.: http://plnkr.co/edit/4CQBEV1S2wFFwKWbWec3?p=preview.