javascript - 如何创建将覆盖 ng-disabled 的自定义 Angular Directive(指令)？

Question

首先是一些背景知识:我的应用程序允许用户通过管理工具控制是否需要、禁用字段等。我有一项服务采用字段名称并以如下格式返回用户定义的规则:

{
  "disabled" : true,
  "required" : true
}

我想要一个自定义属性指令，该指令将使用该服务控制输入字段上的这些属性。我希望用法看起来像这样:

<input type="text" my-rule="fieldName" ng-model="myfield" />

我可以使用如下指令轻松完成此操作:

angular.module('app').directive('myRule', ['$http',
  function($http) {
    return {
      restrict: 'A',
      scope: {
        myRule: '@'
      },
      link: function(scope, element, attrs) {
        $http.get('/api/rule/'+scope.myRule).success(function(rule) {
          if (rule.disabled) {
            element.attr('disabled','disabled');
          }
          if (rule.required) {
            element.attr('required','required');
          }
        });
      }
    }
  }
]);

我的问题是，如果用户没有禁用字段，我可能仍想禁用它，例如，直到填写了另一个字段。使用 ng-disabled 应该很容易做到这一点:

<input type="text" my-rule="fieldA" ng-model="fieldA" />
<input type="text" my-rule="fieldB" ng-model="fieldB" ng-disabled="!fieldA" />

但是，这不起作用，因为如果用户选择禁用 fieldB，那么无论 ng-disabled 属性如何，该字段都应该始终被禁用，而不是 ng-disabled 属性覆盖用户的规则。如果该字段被用户禁用，我尝试了类似这样的方法来删除 ng-disabled 但这似乎没有效果:

angular.module('app').directive('myRule', ['$http',
  function($http) {
    return {
      restrict: 'A',
      scope: {
        myRule: '@'
      },
      link: function(scope, element, attrs) {
        $http.get('/api/rule/'+scope.myRule).success(function(rule) {
          if (rule.disabled) {
            element.attr('disabled','disabled');
            element.removeAttr('ng-disabled');
          }
          if (rule.required) {
            element.attr('required','required');
            element.removeAttr('ng-required');
          }
        });
      }
    }
  }
]);

这会删除该属性，但此时似乎为时已晚，只要填写了 fieldA，该字段仍会启用。

如何动态删除自定义指令中的 ng-disabled 属性，使其不再对该字段产生影响？

更新:

我添加了一个代码片段来演示我的问题。

    angular.module('app',[]).directive('myRule', ['$http',
      function($http) {
        return {
          restrict: 'A',
          scope: {
            myRule: '@'
          },
          link: function(scope, element, attrs) {
            // would normally be making an ajax call to get the rule
            var rule = { disabled: scope.myRule != "fieldA" };

            if (rule.disabled) {
              element.attr('disabled','disabled');
              element.removeAttr('ng-disabled');
            }
          }
        }
      }
    ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <p>Field B and Field C have been disabled by the user but since Field C includes an ng-disabled expression it will be incorrectly enabled when Field A is filled out.</p>
  <input type="text" my-rule="fieldA" ng-model="fieldA" placeholder="Field A" />
  <input type="text" my-rule="fieldB" ng-model="fieldB" placeholder="Field B" />
  <input type="text" my-rule="fieldC" ng-model="fieldC" placeholder="Field C" ng-disabled="!fieldA" />
</div>

Answer 1

尝试使用prop('disabled', boolean) 而不是attr()。这将更改并不总是与属性相同的元素属性。

由于您是在 Angular 之外操作 DOM，因此您可能还应该通过调用 scope.$apply() 或 $timeout()

不确定这是否可行，我认为您可能需要一个指令来包装整个输入。

一个建议是看一下angular-formly，它构建了整个表单，包括来自对象模型的条件验证