Question

我使用此指令将输入限制为5个字符的百分比

   monApp.directive('awLimitLength', function () {
  return {
    restrict: "A",
    require: 'ngModel',
    link: function (scope, element, attrs, ngModel) {
      attrs.$set("ngTrim", "false");
      var limitLength = parseInt(attrs.awLimitLength, 10);// console.log(attrs);
      scope.$watch(attrs.ngModel, function(newValue) { 
        if(ngModel.$viewValue.length>limitLength){
          ngModel.$setViewValue( ngModel.$viewValue.substring(0, limitLength ) );
          ngModel.$render();
        }
      });
    }
  };
})

并像这样使用它：

<input name="name" type="text"  ng-model="nameVar" aw-limit-length="5"/>

当输入为空时BUt，firebug会注意到这样的几个错误：

  Error: ngModel.$viewValue is undefined


Error: ngModel.$viewValue is null

我怎么能避免这些错误？谢谢。我希望当输入为空时不要启动指令。

我试过这个：但它没有用：

  monApp.directive('awLimitLength', function () {
  return {
    restrict: "A",
    require: 'ngModel',
    link: function (scope, element, attrs, ngModel) {
      attrs.$set("ngTrim", "false");
      var limitLength = parseInt(attrs.awLimitLength, 5);// console.log(attrs);
      if(attrs.ngModel!=null){
          scope.$watch(attrs.ngModel, function(newValue) { 
            if(ngModel.$viewValue.length>limitLength){
              ngModel.$setViewValue( ngModel.$viewValue.substring(0, limitLength ) );
              ngModel.$render();
            }

          });
       }
    }
  };
})

Answer 1

检查ngModel。$ viewValue在取长度之前存在

scope.$watch(attrs.ngModel, function(newValue) { 
   if(ngModel.$viewValue && ngModel.$viewValue.length>limitLength){
      ngModel.$setViewValue( ngModel.$viewValue.substring(0, limitLength ) );
      ngModel.$render();
    }
  });

Answer 2

你用过指令中 require：'ngModel'。所以你不能在没有模型变量值的情况下使用这个指令。

删除 require：'ngModel'＆amp;它会起作用。

输入为空时，AngularJS指令会发生错误

2 个答案: