Question

我已经创建了一个自定义的“bs-input”指令，它将输入字段包装到bootstrap模板中。如果我填写所有属性（类型，最大长度，要求，模式等），它的工作正常。然而，

<bs-input ng-model="something">

不起作用。由于maxlength验证和ng-pattern验证（例如，没有regexp），该字段被认为是无效的。如何将未定义的变量传递给输入标记，或者如果它们没有值，则有条件地排除它们？

这是我的指示：

mod.directive('bsInput', function() {
  return {
    restrict: 'A',
    require: '^form',
    template: '
      <div ng-form="innerForm" class="form-group" ng-class="getFieldClass()"> 
        <label class="control-label" ng-class="{\'col-sm-5\': eVertical }" for="field">{{ eLabel | tt }}</label> 
        <div ng-class="{\'col-sm-7\': eVertical }"> 
          <input type="{{ type }}" class="form-control" name="field" 
            ng-model="ngModel" ng-maxlength="eMaxlength" ng-required="eRequired" 
            ng-disabled="eDisabled" ng-pattern="ePattern" 
            placeholder="{{ePlaceholder}}"> 

            <p class="help-block" ng-show="eHelp">{{eHelp}}</p> 

        </div> 
      </div>',
    scope: {
      ngModel: "=",
      eLabel: "@",
      type: "@",
      eMaxlength: "@",
      eRequired: '=',
      ePattern: '@',
      eVertical: '=',
      eDisabled: '=',
      ePlaceholder: '@',
      eHelp: '@'
    }
  };
});

Answer 1

您应该在指令中定义您的属性是可选的。 e.g。

   scope: {
      ngModel: "=",
      eLabel: "@",
      type: "@",
      eMaxlength: "@?", <---------
      eRequired: '=',
      ePattern: '@',
      eVertical: '=',
      eDisabled: '=',
      ePlaceholder: '@',
      eHelp: '@'
    }

然后在你的链接函数中检查你的param是否未定义，如果是，则将其设置为空字符串。浏览器不会对其进行验证：

link : function(scope, elem, attrs) {
 if (scope.eMaxLength === undefined) {
   scope.eMaxLength = '';
 }
}

如何在自定义指令中传递ng *属性？

1 个答案: