AngularJS - 属性指令输入值更改 [英] AngularJS - Attribute directive input value change

问题描述

我有一个 AngularJS 属性指令，我想在其父输入的值发生变化时随时采取行动.现在我正在使用 jQuery:

angular.module("myDirective", []).directive("myDirective", function(){返回 {限制:A"，范围:{我的指令:=我的指令"},链接:函数(范围、元素、属性){element.keypress(功能(){//做东西});}};});

有没有办法在没有 jQuery 的情况下做到这一点?我发现 keyPress 事件并没有完全按照我的意愿去做，虽然我确定我会想出一个解决方案，但当我在 Angular 项目中使用 jQuery 时，我有点紧张.

那么 Angular 的做法是什么?

解决方案

AngularJS 文档.

评论很好，应该能让你指明正确的方向.

一个简单的例子，也许更多的是你正在寻找的东西如下:

jsfiddle

<小时>

HTML

<input type="text" ng-model="test" my-directive>

<小时>

JavaScript

angular.module('myDirective', []).directive('myDirective', function () {返回 {限制:'A'，链接:函数(范围、元素、属性){scope.$watch(attrs.ngModel, 函数 (v) {console.log('值改变了，新值是:' + v);});}};});函数 x($scope) {$scope.test = '这里的值';}

<小时><小时>

同样的事情，不需要 ngModel jsfiddle:

JavaScript

angular.module('myDirective', []).directive('myDirective', function () {返回 {限制:'A'，范围: {我的指令:'='},链接:函数(范围、元素、属性){//设置文本框的初始值element.val(scope.myDirective);element.data('old-value', scope.myDirective);//检测外部变化并更新我们的输入scope.$watch('myDirective', function (val) {element.val(scope.myDirective);});//在模糊时，更新范围内的值element.bind('propertychange keyup paste', function (blurEvent) {if (element.data('old-value') != element.val()) {console.log('值改变了，新值是:' + element.val());范围.$应用(函数(){scope.myDirective = element.val();element.data('旧值', element.val());});}});}};});函数 x($scope) {$scope.test = '这里的值';}

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:

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.

So what's the Angular way to do this?

解决方案

There's a great example in the AngularJS docs.

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

---

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

---

---

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

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

这篇关于AngularJS - 属性指令输入值更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！