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

【问题标题】：How to pass down ng* attributes in a custom directive?如何在自定义指令中传递 ng* 属性？
【发布时间】：2014-04-28 12:23:12
【问题描述】：

我创建了一个自定义“bs-input”指令，将输入字段包装到引导模板中。如果我填写所有属性（类型、最大长度、必需、模式等），它就可以正常工作。然而，

<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: '@'
    }
  };
});

【问题讨论】：

我觉得你可以试试，并在jsfiddle或plnkr上提供代码，最好有人修改它。

标签： angularjs angularjs-directive

【解决方案1】：

您应该在指令中定义您的属性是可选的。例如

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

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

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

【讨论】：