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

如何在指令中观察Angular变量并验证？

1 个答案: