$ izle ben açısal js için yeni direktif

Question

içinde yalnızca bir kez ateş ediyor, bu yüzden bazı biri bana out.I yardım burada şablon var: Lütfen

<form ng-model="signup" form-valid> 
    <input type="text" name="username" ng-model="signup.username">{{signup}} 
</form> 

Ve yönergesi şu şekildedir:

app.directive("formValid",function(){ 

return { 
    restrict:"A", 
    require:"ngModel", 
    link:function(scope,element,attrs){ 
      scope.$watch(attrs.ngModel,function(newValue){ 
       if(newValue){ 
       console.log(newValue); 
       } 
      }); 
     } 
    }}); 

Metin kutusuna herhangi bir değer girdiğimde, model değişiyor ve buna göre "$ watch" işlemi başlatılmalıdır. Ancak burada "$ watch", sadece ilk defa metin kutusuna herhangi bir değer girdiğimde bir defa atılır. .Şimdiden teşekkürler.

Answer 1

Aşağıdaki örnekte ngModel benzeri bir çözüm kullanmak olacaktır.

app.directive("formValid",function(){ 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function(scope, element, attrs, ngModel) { 
     scope.$watch(function() { 
      return ngModel.$modelValue; 
     }, function(newValue) { 
      console.log(newValue); 
     }); 
     } 
    } 
    }); 

Düzenleme: hızlı çözüm Blackhole tarafından yorumunu takip etmek ve true ekleyerek derin izlemek için saatinizi güncellemek olacaktır. Bunun nedeni, signup özniteliğini izlediğiniz, ancak username model değerinin kaydolma özelliğidir. Derin saat özellikleri izlemek için hizmet edecektir.

attrs aracılığıyla veya attrs aracılığıyla ya da biçimlendiricileri veya ayrıştırıcıları kullanarak (Michaels yanıtında ayrıntılı olarak görüldüğü üzere daha iyi bir çözümdür). Eğer ngModelController kullandığınızda

Answer 2

, model üzerinde değişiklikler izlemek için standart bir yol formatter oluşturmaktır:

link: function(scope, element, attrs, ngModelCtrl) { 
    ngModelCtrl.$formatters.push(function(value) { 
     // Do something with value 
     return value; 
    }); 
} 

modeli doğrudan değiştirildiğinde biçemleyicileri sadece tetiklenir unutmayın. Değişiklik kullanıcı arayüzünden geliyorsa (yani kullanıcı bir şeyi değiştirir), bunun yerine ayrıştırıcıları tetiklenir. Yani siz de bunu yapmak gerekebilir:

ngModelCtrl.$parsers.push(function(value) { 
    // Do something with value 
    return value; 
}); 

Working Plunker

Size o boru hatları işe tam olarak nasıl çalıştığını anlamak böylece ngModelController belgeleri okumak düşündürmektedir.

scope: { model: '=ngModel' }, 
link: function(scope) { 
    scope.$watch('model', function(value) { 
     // Do something with value 
    }); 
} 

Working Plunker

:

Fakat modeli değişiklikleri (istediğiniz veya ne formata gerek ne de herhangi bir şey ayrıştırmak yoktur), o zaman daha basit bir şey yapabilirsiniz yapmak istediğiniz tüm haberdar olsun eğer

Ancak yönergelerinizin adı olan formValid verildiğinde, ngModelController'ın kullanılması doğru yaklaşımdır.

GÜNCELLEME

O ngModelController tartışmasız bir eksiklik olduğunun altını çizmekte fayda var: Bu "referans" türleri (örn diziler, nesneler) ile çok iyi çalışmaz. Bunun hakkında daha fazla bilgi here bulunabilir.