AngularJS - 속성 지시 입력 값 변경

AngularJS - 속성 지시 입력 값 변경

나는 Angular가 있다.JS 속성 디렉티브는 부모 입력의 값이 변경될 때마다 액션을 취하고 싶습니다.지금은 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에 좋은 예가 있습니다.JS 문서

그것은 매우 좋은 코멘트를 가지고 있고, 당신이 올바른 방향을 가리키도록 할 것입니다.

간단한 예를 들어, 그 이상의 예를 다음에 제시하겠습니다.

jsfiddle

---

HTML

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

---

자바스크립트

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:

자바스크립트

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

이것은 입력 요소를 부모로서 가지고 있어야 하기 때문에, 당신은 그냥 사용할 수 있습니다.

<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.
      });
  };
};

커스텀 디렉티브 값의 런타임 변경을 감시하려면$observe의 방법attrs오브젝트, put 대신$watch커스텀 디렉티브에 포함되어 있습니다.여기 같은 내용의 문서가 있습니다.$140의 문서

언급URL : https://stackoverflow.com/questions/16308322/angularjs-attribute-directive-input-value-change