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

萨拉斯·阿里亚（Saras Arya）

我已经在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帖子后，我看不到任何错误。

dfsq

首先，您没有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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。