Angularjs: слушайте изменение модели в директиве

Я пытаюсь выяснить, как я могу слушать, когда модель обновляется в директиве.

eventEditor.directive('myAmount',function(){
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
          scope.$watch(attr['ngModel'], function (v) {
            console.log('value changed, new value is: ' + v);
          });
        } 
      } 
    }
};

});

директива вызывается в ng-repeat как

<div ng-repeat="ticket in tickets">
    <input my-amount ng-model="ticket.price"></input> 
</div>

очень рад за любую помощь. Я не понимаю, как атрибут scope выглядит в ng-repeat.

спасибо.

4 ответов


http://jsbin.com/mihupo/1/edit

attr

app.directive('myAmount',function(){
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
          scope.$watch(attrs['ngModel'], function (v) {
            console.log('value changed, new value is: ' + v);
          });
        } 
      } ;
    }
);

попробуйте сделать это

eventEditor.directive('myAmount',function(){
    return {
    restrict: 'A',
    scope: {model: '=ngModel'},
    link: function(scope, elem, attrs) {
            scope.$watch('model', function (v) {
            console.log('value changed, new value is: ' + v);
          });
        } 
      } 
    }
  };
});

eventEditor.directive('myAmount',function(){
return {
    restrict: 'A',
    required : 'ngModel'       // Add required property 
    link: function(scope, elem, attrs,ngModelCtr) {

      ngModelCtr.$render = function(){   //  Add $render 
      // Your logic
    }

  } 
 }
 };
 });
  1. добавьте обязательное свойство с ngModel, так как вы используете ngModel (я имею в виду фактическую угловую ng-модель, а не пользовательский атрибут ng-model).
  2. затем вызовите функцию $render. Он будет выполняться, как только произойдет изменение в ngModel (изменение значений $modelValue и $viewValue). https://docs.angularjs.org/api/ng/type/ngModel.NgModelController# $render

вы можете использовать $ watch, который также является правильным.


следующий код работает для меня.

app.directive('myAmount',function(){
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
          attrs.$observe('ngModel', function (v) {
            console.log('value changed, new value is: ' + v);
          });
        } 
      } ;
    }
);