属性指令输入值的改变

I've got an AngularJS attribute directive, and I would like to take an action any time its parent input's value changes. Right now I'm doing it with jQuery:

我有一个AngularJS属性指令，我希望在父输入的值发生变化时采取相应的操作。现在我用jQuery来做:

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

Is there a way to do this without jQuery? I'm finding the keyPress event isn't doing exactly what I want it to, and while I'm sure I'll come up with a solution, I get a little nervous when I resort to using jQuery in an Angular project.

有没有一种不用jQuery就能做到这一点的方法?我发现按键事件并没有做我想做的事情，虽然我确定我会想出一个解决方案，但当我在一个有棱角的项目中使用jQuery时，我有点紧张。

So what's the Angular way to do this?

那么这个角是多少呢?

3 个解决方案

#1

There's a great example in the AngularJS docs.

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

It's very well commented and should get you pointed in the right direction.

它评论得很好，应该能让你找到正确的方向。

A simple example, maybe more so what you're looking for is below:

一个简单的例子，也许更多，你要找的是:

jsfiddle

jsfiddle

---

HTML

HTML

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

---

JavaScript

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

---

---

Edit: Same thing, doesn't require ngModel jsfiddle:

编辑:同样，不需要ngModel jsfiddle:

JavaScript

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

#2

Since this must have an input element as a parent, you could just use

因为它必须有一个作为父元素的输入元素，所以您可以使用它

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

Alternatively, you could use the ngModelController and add a function to $formatters, which executes functions on input change. See http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController

或者，您可以使用ngModelController并向$formatters添加一个函数，该函数在输入更改时执行。见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.
      });
  };
};

#3

To watch out the runtime changes in value of a custom directive, use $observe method of attrs object, instead of putting $watch inside a custom directive. Here is the documentation for the same ... $observe docs

要监视自定义指令的运行时值变化，请使用attrs对象的$ observer方法，而不是将$watch放在自定义指令中。这是同样的文件……观察美元文档