如何監視指令中的角度變量和驗證？

Question

我寫了一個簡單的Angular指令，通過這個指令我在文本框中輸入任何內容，例如ion-Md-input應該在我的指令中驗證長度爲6.並且我試圖觀察變量，直到它達到6的大小並驗證並基於它激活提交按鈕。

的index.html

<div>   
<ion-md-input label="Enter the Device ID" hightlight-color="dark" type="text" ng-model="link" required ng-minlength=6></ion-md-input>    
</div> 

指令

vehicoApp.directive('ionMdInput', ['$http',function($http){ 
console.log('In ionMdInput'); 
    return { 
    restrict : 'E', 
    template : 
    '<input type="text" class="transition-input ng-model="link" required ng-minlength=6>'+ 
    '<span class="md-highlight"></span>'+ 
    '<span class="md-bar"></span>'+ 
    '<label>{{label}}</label>', 
    require : 'ngModel', 
    scope : { 
     'label' : '@', 
     'ngModel' : '=' 
    }, 

link : function (scope, elem, attrs, ngModel) 
{ 
    if(!ngModel) return; 

    scope.$watch(attrs.link, function(){ 
    validate(); 
    }, true); 

    var validate = function() { 
    var val1 = ngModel.$viewValue; 
    console.log(val1); 
    } 
} 
} 
}]); 

現在，即使是在我開始在文本框中鍵入名稱。我得到一個未定義的，仍然是這樣。現在我想看到這個價值並驗證它。我會怎麼做呢？ 經過大量SO帖子後我沒有看到任何錯誤。

Answer 1

首先你沒有link屬性。那麼你的範圍配置不是你將如何設置在你的情況。您可以簡單地將ngModel屬性雙向綁定到內部作用域模型，該模型將用作指令輸入的ngModel。

這些更改後，您可以設置觀察家這種模式：

scope.$watch('model', function() { 
    validate(); 
}, true); 

整個指令將是這樣的：

.directive('ionMdInput', ['$http', function($http) { 
    return { 
     restrict: 'E', 
     template: 
      '<input type="text" class="transition-input" ng-model="model" required ng-minlength=6>' + 
      '<span class="md-highlight"></span>' + 
      '<span class="md-bar"></span>' + 
      '<label>{{label}}</label>', 
     scope: { 
      'label': '@', 
      'model': '=ngModel' 
     }, 

     link: function(scope, elem, attrs) { 
      if (!attrs.ngModel) return; 

      scope.$watch('model', function() { 
       validate(); 
      }, true); 

      var validate = function() { 
       console.log(scope.model); 
      } 
     } 
    } 
}]); 

演示：http://plnkr.co/edit/wh8ylLbW4YpZcEKOryae?p=preview