如何监视指令中的角度变量和验证？

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