用于设置禁用属性的 Angular 指令答案

【问题标题】：Angular directive to set the disabled attribute用于设置禁用属性的 Angular 指令
【发布时间】：2015-10-07 09:43:26
【问题描述】：

我希望能够从两个地方设置任何控件的禁用属性。在控件本身上，基于在视图本身中硬编码的规则。并且来自基于外部服务中定义的规则的指令。

当指令将 disabled 设置为 true 时，不应被控件上定义的内容覆盖。但是，当指令将 disabled 设置为 false 时，控件上定义的内容应该触发。

我希望这是有道理的。到目前为止，我有这段代码，但它不能按我想要的方式工作。

<input check-edit-matrix type="checkbox" 
       data-ng-model="model.isPrivate" 
       ng-disabled="model.isDeleted || model.isConfidential"  />

(function () {
  'use strict';

  var directiveId = 'checkEditMatrix';

  angular.module('common.directives')
         .directive(directiveId, ['dataService', directiveFunc]);

  function directiveFunc(dataService) {
    return {
      restrict: 'A',
        scope: { 
        },
        link: function (scope, element, attrs) {

          attrs['disabled'] = 'disabled';

          //if (attrs['disabled'] === 'disabled') {
          //    alert('already disabled !')
          //}
        }
      };
    }
})();

【问题讨论】：

标签： angularjs angularjs-directive directive

【解决方案1】：

将指令的值与您所拥有的进行或操作将完成这项工作。假设指令定义了一个属性：isDisabledByDirective，将代码更改为：

<input check-edit-matrix type="checkbox" 
   data-ng-model="model.isPrivate" 
   ng-disabled="model.isDeleted || model.isConfidential || isDisabledByDirective"  />

它应该起作用的原因是，如果它已经被值禁用，则指令无法更改它（true || false）=== true。如果现有值没有禁用它，指令代码可能会更改它 - (false || true) === true

【讨论】：