1

我正在编写一个属性指令，如果设置了一个变量，它会将 disabled 属性添加到所有输入和按钮，基本上使表单成为只读的。这是一个功能请求...该表单用于过期数据，但客户希望在需要时查看它。

无论如何，我在视图上有一些输入和按钮，并且我编写了一些包含输入、选择和按钮的自定义指令。出于某种原因，无论如何，除非我对 .find() 使用 $timeout，否则我无法将我正在处理的属性指令用于 .find() 输入并在我的自定义指令中选择。这是我到目前为止所拥有的。它有效，但我知道我的同事会拒绝使用 $timeout。

'use strict';
angular.module('induction').directive('sttiDisabled',['$timeout', function($timeout) {
    return {
        restrict: 'A',
        link: function postLink(scope, elem, attrs) {
            var hello = function () {
                var formControls = angular.element(elem.querySelectorAll('input, select, button'));
                for (var i = 0; i < formControls.length; i++) {
                    var el = angular.element(formControls[i]);
                    el.attr('disabled', scope.ceremony.locked);
                    console.log(el);
                };
            };

            // Don't judge. It works flawlessly.
            var promise = $timeout(hello, 0);


        }
    }
}]);

你使用它是这样的：

<div stti-disabled>
<input ng-model="blah" />
<select ng-model="blah2" />
<custom-directive-containing-an-input> </that>
</div>

如果 scope.ceremony.locked===true，输入和选择将被禁用，但不是自定义指令中的输入......除非我使用超时。

编辑：可能是避免在 Angular 应用程序中超时，但我想再次打开这个问题，因为自 2014 年以来情况可能已经发生变化。

4

1 回答 1

1

更新

要禁用组中的所有输入，请使用带有元素的ng-disabled 指令：<fieldset>

<fieldset ng-disabled="formDisable">
   <input ng-model="blah" />
   <select ng-model="blah2" 
          ng-options="name for name in [1,2,3]">
   </select>
   <custom-directive-containing-an-input> 
   </custom-directive-containing-an-input>
   <br>input = {{blah}}
   <br>select = {{blah2}}
   <br>disable = {{formDisable}}
</fieldset>
<input type=checkbox ng-model="formDisable"/>Disable form

PLNKR 上的DEMO

你试过了吗：

  scope.$watch("ceremony.locked", hello);

有关范围方法的更多信息，请参阅AngularJS 范围 API 参考。

更新

您使用$timeout异步调用“hello”方法的方法不能完美地工作；它的工作很脆弱。如果你在你的应用程序中添加更多$timeout的 s 会发生什么？您无法保证调用函数的顺序。

通过使用$watch，您可以保证在感兴趣的范围变量初始化和更改时调用您的 'hello' 函数。

于 2015-12-09T22:40:10.863 回答