AngularJS – 属性指令input值的变化

我有一个AngularJS的属性指令，我想随时采取行动，其父input的价值改变。 现在我正在使用jQuery：

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

有没有办法做到这一点，没有jQuery？ 我发现keyPress事件并没有完全按照我想要的方式进行，虽然我确信我会提出一个解决scheme，但是当我在Angular项目中使用jQuery时，我有点紧张。

那么angular度怎么做呢？

Answer 1

AngularJS文档中有一个很好的例子：

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

这是非常好的评论，应该让你指出正确的方向。

一个简单的例子，可能更多，所以你要找的是以下：

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

编辑同样的东西，不需要ngModel （ 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

由于这必须有一个input元素作为父母，你可以使用

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

或者，您可以使用ngModelController并向$formatters添加一个函数，该函数在input更改时执行函数。 请参阅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

要注意自定义指令的运行时变化值，使用attrs对象的$observe方法，而不是将$watch放在自定义指令中。 以下是相同的文档… $观察文档