Javascript AngularJS自定义指令类似于ng要求

所以我已经花了大约4个小时在这上面了。
我试图实现的是一个自定义指令，类似于ng required，它有一个输入并进行验证。
以下是ng所需的代码

var requiredDirective = function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope, elm, attr, ctrl) {
      if (!ctrl) return;
      attr.required = true; // force truthy in case we are on non input element

      ctrl.$validators.required = function(modelValue, viewValue) {
        return !attr.required || !ctrl.$isEmpty(viewValue);
      };

      attr.$observe('required', function() {
        ctrl.$validate();
      });
    }
  };
};

我知道当所需属性更改其值时，我们将再次进行验证。说如果你有

<input 
ng-model="sor.seal"
ng-model-options="{ updateOn : 'default blur' }"
class="form-control" 
ng-required="sor.sealUwatType=='SEAL'" 
type="text"
placeholder="Enter a SEAL/UWAT ID"
id="seal" 
name="seal" 
/>

当ng required表达式为true时，如何添加属性required=“required”？

---

当ng required表达式为false时，它如何删除属性？

Angular在所有布尔属性等价项上创建内部属性，如

ng required、ng checked、ng disabled

等

var BOOLEAN_ATTR = {};
forEach('multiple,selected,checked,disabled,readOnly,required,open'.split(','), function(value) {
  BOOLEAN_ATTR[lowercase(value)] = value;
});

forEach(BOOLEAN_ATTR, function(propName, attrName) {
  // binding to multiple is not supported
  if (propName == "multiple") return;

  function defaultLinkFn(scope, element, attr) {
    scope.$watch(attr[normalized], function ngBooleanAttrWatchAction(value) {
      attr.$set(attrName, !!value);
    });
  }

  var normalized = directiveNormalize('ng-' + attrName);
  var linkFn = defaultLinkFn;

  if (propName === 'checked') {
    linkFn = function(scope, element, attr) {
      // ensuring ngChecked doesn't interfere with ngModel when both are set on the same input
      if (attr.ngModel !== attr[normalized]) {
        defaultLinkFn(scope, element, attr);
      }
    };
  }

  ngAttributeAliasDirectives[normalized] = function() {
    return {
      restrict: 'A',
      priority: 100,
      link: linkFn
    };
  };
});

注册在这些上的通用链接函数执行属性的通用切换

var BOOLEAN_ATTR = {};
forEach('multiple,selected,checked,disabled,readOnly,required,open'.split(','), function(value) {
  BOOLEAN_ATTR[lowercase(value)] = value;
});

forEach(BOOLEAN_ATTR, function(propName, attrName) {
  // binding to multiple is not supported
  if (propName == "multiple") return;

  function defaultLinkFn(scope, element, attr) {
    scope.$watch(attr[normalized], function ngBooleanAttrWatchAction(value) {
      attr.$set(attrName, !!value);
    });
  }

  var normalized = directiveNormalize('ng-' + attrName);
  var linkFn = defaultLinkFn;

  if (propName === 'checked') {
    linkFn = function(scope, element, attr) {
      // ensuring ngChecked doesn't interfere with ngModel when both are set on the same input
      if (attr.ngModel !== attr[normalized]) {
        defaultLinkFn(scope, element, attr);
      }
    };
  }

  ngAttributeAliasDirectives[normalized] = function() {
    return {
      restrict: 'A',
      priority: 100,
      link: linkFn
    };
  };
});

因此基本上，

ng required

添加了属性

required

，该属性执行以下操作：

您可以通过输出

ngRequired

指令实际包含的内容来验证这一点，它包含两个指令配置，一个具有优先级100（在ng模型之前运行），用于设置/重置其所在元素上的属性，另一个具有ng模型和验证器的验证挂钩

.config(function($provide) {
  $provide.decorator('ngRequiredDirective', function($delegate) {
    console.log($delegate); //Check the console on the configuration you will see array of 2 configurations
    return $delegate;
  })
});

这相当于为同一个指令选择器创建两个配置，例如：

angular.module（'app'，[]）.directive（'myDir'，function（）{
返回{
限制：“A”，
链接：函数（）{
控制台日志（“A”）；
}
}
}).directive（'myDir'，function（）{
返回{
限制：“A”，
链接：函数（）{
控制台日志（“B”）；
}
}
}).config（函数（$provide）{
$provide.decorator（'myDirDirective'，函数（$delegate）{
log（$delegate）；//检查控制台上的配置，您将看到2个配置的数组
返回$delegate；
})
});