Question

我正试图找出在指令中更新模型时如何收听。

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>

非常乐意为您提供帮助。我不明白范围属性在ng-repeat中是怎么样的。

感谢。

Answer 1

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

attrs代替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);
          });
        } 
      } ;
    }
);

Answer 2

尝试这样做

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);
          });
        } 
      } 
    }
  };
});

Answer 3

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
    }

  } 
 }
 };
 });

使用ngModel添加必需的属性，因为您使用的是ngModel（我的意思是实际的角度ng-model，而不是用户自定义的ng-model属性）。
然后调用$ render函数。 ngModel中发生更改（$ modelValue和$ viewValue的值更改）后，它将立即执行。 https://docs.angularjs.org/api/ng/type/ngModel.NgModelController# $ render

您可以使用也是正确的$ watch。

Answer 4

以下代码适用于我。

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);
          });
        } 
      } ;
    }
);

Angularjs：在指令中听取模型变化

4 个答案: