AngularJS - Attribut-Direktive Eingangswert Änderung

Question

Ich habe eine AngularJS Attributrichtlinie, und ich möchte jederzeit eine Aktion ausführen, wenn sich der Wert des übergeordneten Eingangs ändert. Im Moment mache ich es mit jQuery:

angular.module("myDirective", []) 
.directive("myDirective", function() 
{ 
    return { 
     restrict: "A", 
     scope: 
     { 
      myDirective: "=myDirective" 
     }, 
     link: function(scope, element, attrs) 
     { 
      element.keypress(function() 
      { 
       // do stuff 
      }); 
     } 
    }; 
}); 

Gibt es eine Möglichkeit, dies ohne jQuery zu tun? Ich finde, dass das keyPress-Ereignis nicht genau das tut, was ich will, und während ich sicher bin, dass ich eine Lösung finden werde, werde ich ein wenig nervös, wenn ich jQuery in einem Angular-Projekt verwende.

Also, was ist der Winkel Weg, dies zu tun?

Answer 1

Es ist ein großartiges Beispiel in der AngularJS docs hier:

http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController

Es ist sehr gut kommentiert und sollen Sie in der richtigen Richtung wiesen.

Ein einfaches Beispiel, vielleicht so mehr, was Sie suchen ist unten:

http://jsfiddle.net/mb98y/

HTML

<div ng-app="myDirective" ng-controller="x"> 
    <input type="text" ng-model="test" my-directive> 
</div> 

JavaScript

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

function x($scope) { 
    $scope.test = 'value here'; 
} 

bearbeiten Die gleiche Sache , nicht erforderlich ngModel ire (http://jsfiddle.net/mb98y/1/):

JavaScript:

angular.module('myDirective', []) 
    .directive('myDirective', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      myDirective: '=' 
     }, 
     link: function (scope, element, attrs) { 
      // set the initial value of the textbox 
      element.val(scope.myDirective); 
      element.data('old-value', scope.myDirective); 

      // detect outside changes and update our input 
      scope.$watch('myDirective', function (val) { 
       element.val(scope.myDirective); 
      }); 

      // on blur, update the value in scope 
      element.bind('propertychange keyup paste', function (blurEvent) { 
       if (element.data('old-value') != element.val()) { 
        console.log('value changed, new value is: ' + element.val()); 
        scope.$apply(function() { 
         scope.myDirective = element.val(); 
         element.data('old-value', element.val()); 
        }); 
       } 
      }); 
     } 
    }; 
}); 

function x($scope) { 
    $scope.test = 'value here'; 
} 

Answer 2

Da dies ein Eingabeelement als Eltern haben müssen, können Sie nur verwenden

<input type="text" ng-model="foo" ng-change="myOnChangeFunction()"> 

Alternativ können Sie die ngModelController verwenden und fügen eine Funktion zu $formatters, die Funktionen bei Eingangswechsel ausführt. Siehe http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController

.directive("myDirective", function() { 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function(scope, element, attr, ngModel) { 
     ngModel.$formatters.push(function(value) { 
     // Do stuff here, and return the formatted value. 
     }); 
    }; 
}; 

Answer 3

Um die Laufzeitwertänderungen von einer benutzerdefinierten Richtlinie zu achten, verwenden $observe Methode von attrs Objekt, statt $watch innerhalb einer benutzerdefinierten Richtlinie setzen. Hier ist die Dokumentation für die gleiche ... $observe docs