41

AngularJS 属性ディレクティブがあり、その親入力の値が変更されるたびにアクションを実行したいと考えています。今、私は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 イベントが思いどおりに機能していないことに気付きました。解決策を思い付くと確信していますが、Angular プロジェクトで jQuery を使用することに頼ると、少し緊張します。

では、これを行うAngularの方法は何ですか?

4

3 に答える 3

66

AngularJS docsに素晴らしい例があります。

非常によくコメントされており、正しい方向に向けられるはずです。

簡単な例ですが、探しているものは以下のとおりです。

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

編集:同じこと、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';
}
于 2013-04-30T20:31:44.210 に答える
12

これには親として入力要素が必要なので、単に使用できます

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

または、 を使用して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.
      });
  };
};
于 2013-04-30T20:34:18.377 に答える
0

カスタム ディレクティブの値の実行時の変更を監視するには、カスタム ディレクティブ内に配置する代わりに、オブジェクトの$observeメソッドを使用します。これは同じドキュメントです... $observe docsattrs$watch

于 2016-11-07T17:40:50.817 に答える