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属性会覆盖用户＆＃ 39;规则。如果用户禁用该字段但我似乎没有效果，我尝试过类似这样的内容删除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属性，使其不再对该字段产生影响？

更新

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

由于您正在操纵角度以外的DOM，因此您应该通过调用scope.$apply()或$timeout()

告诉角度来运行摘要

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

一个建议是看angular-formly构建整个表单，包括从对象模型中进行条件验证

如何创建一个覆盖ng-disabled的自定义角度指令？

1 个答案: