AngularJS - изменение значения входной переменной атрибута

Question

У меня есть директива атрибута 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 не делает именно то, что я хочу, и, хотя я уверен, что придумаю решение, я немного нервничаю, когда прибегаю к использованию 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'; 
} 

Редактировать То же самое , не требуется IRE 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 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. 
     }); 
    }; 
}; 

Answer 3

Чтобы следить за изменениями во время выполнения в значении пользовательской директивы, используйте метод $observe из attrs объекта, вместо того, чтобы $watch внутри пользовательской директивы. Вот документация по тому же ... $observe docs