AngularJS - Attribute yönergesi giriş değeri değişikliği

Question

AngularJS öznitelik yönergesi var ve üst girişinin değeri her değiştiğinde bir eylem yapmak istiyorum. Şimdi jQuery ile yapıyorum:

JQuery olmadan bunu yapmanın bir yolu var mı? Ben keyPress olay tam olarak istediğimi yapmıyor bulma buluyorum ve eminim ben bir çözüm ile geleceğim, ben bir açısal projede jQuery kullanarak başvururken biraz gerginim.

Bunu yapmanın Açısal yolu nedir?

Answer 1

harika bir örnek burada angularjs docs var: her

http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController

çok iyi yorumladı ve sen doğru yöne almalısınız.

Basit bir örnek, belki daha fazla bu yüzden aradığınızı aşağıdaki gibidir:

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

Düzenleme Aynı şey , gerektirmez ire ngModel (http://jsfiddle.net/mb98y/1/):

JavaScript: Bu bir ebeveyn olarak bir giriş öğesi olmalıdır yana

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

, sadece

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

Alternatif kullanabilirsiniz, sen ngModelController kullanıp ekleyebilir Giriş değişikliğinde işlevleri yerine getiren $formatters işlevine bir işlev. , 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

özel direktifi değerinde çalışma zamanı değişiklikleri izlemek için Bkz bunun yerine özel bir direktif iç $watch koyma, attrs nesnenin $observe yöntemini kullanın. İşte bunun için belgeler ... $observe docs