如何创建指令以禁用所有元素进入 div 元素答案

【问题标题】：How to create a directive for disable all elements into div element如何创建指令以禁用所有元素进入 div 元素
【发布时间】：2014-09-13 10:58:55
【问题描述】：

如何创建一个指令来禁用所有元素进入 div 元素？

类似这样的：

<div div-disabled div-disabled-condition="state=='Stack'||state=='Over'||state=='Flow'">
  <input type="text"/>
  <input type="url"/>
  <div>
    <input type="text"/>
    <input type="url"/>
  </div>
<div>

有可能吗？我不知道。

     angular
    .module('uiRouterApp.ctrl.add', ['uiRouterApp.ctrl.customDirective'])
    .controller('addCtrl', [
        '$scope',
        '$location',
        '$stateParams',
        '$state',
        function ($scope, $location, $stateParams, $state) {
            $scope.state = {};
         }
    ]).directive('divDisabled', function () {
        return {
        scope: {
              divDisabledCondition: '@'
             },
            link: function (scope, element, attrs) {

            }
        };
    });

更新：

请看这个：

   <div class="col-sm-12 ng-isolate-scope" selected-object="SelectedAutoComplete" local-data="requirements.Item1" search-fields="NameFa,NameEn" title-field="NameFa" minlength="2" field-required="true" image-field="ImageUrl" disable-auto-compelete="response.State=='Success'||response.State=='Error'||response.State=='Warning'">

<div class="angucomplete-holder">
  <input id="_value" ng-model="searchStr" type="text" placeholder="select" class="form-control ng-dirty" ng-focus="resetHideResults()" ng-blur="hideResults()" autocapitalize="off" autocorrect="off" autocomplete="off" ng-change="inputChangeHandler(searchStr)" ng-disabled="response.State=='Success'||response.State=='Error'||response.State=='Warning'" style=""> 

  <!-- ngIf: showDropdown -->
  </div>
  </div>

指令：

.directive('contentsDisabled', function() {
        return {
            compile: function(tElem, tAttrs) {
                var inputs = tElem.find('input');
                for (var i = 0; i < inputs.length; i++) {
                    inputs.attr('ng-disabled', tAttrs['disableAutoCompelete']);
                }
            }
        }
    })

为什么当state 为“成功”或“错误”或“警告”时输入未被禁用？

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

您可以创建一个指令，通过添加条件在编译时更改其内容。这些方面的东西（未经测试）：

module.directive('contentsDisabled', function() {
  return {
    compile: function(tElem, tAttrs) {
      var inputs = tElem.find('input');
      inputs.attr('ng-disabled', tAttrs['contentsDisabled']);
    }
  };
});

在此处查看 JSFiddle：http://jsfiddle.net/HB7LU/6380/

这样做的缺点是您只需将表达式从 contents-disabled 复制到任何输入的 ng-disabled 属性中 - 如果有人使用指令反过来创建 <input> 元素，您将不会选择它们。

获取FormController 实例并遍历其所有控件不会那么脆弱，但遗憾的是，AngularJS 并没有在表单中公开控件。也许提交功能请求？

【讨论】：

@Football-Is-My-Life 我认为这只是因为您的代码中有大量拼写错误。请看这里的小提琴：jsfiddle.net/HB7LU/6380
您能分享一下指令代码（JsFiddle）中有空循环的原因吗？
当元素已经存在 ng-disable 属性时，我更新了您的方法：jsfiddle.net/4yvza3xp/1

【解决方案2】：

您也可以使用标签字段集：

<form>
    <fieldset ng-disable="foo">
        <input name="the_one"/>
        <input name="the_second"/>
    </fieldset>
    <input name="the_thrid"/>
</form>

这样，当变量 foo 为 TRUE 时，输入“the_one”和“the_second”将被禁用。

【讨论】：

字段集禁用在 IE 中不起作用。（还有野生动物园，我相信）

【解决方案3】：

为什么不在每个输入的所需表达式上使用ng-disabled？

https://docs.angularjs.org/api/ng/directive/ngDisabled

如果您确实需要分组指令，请使用该指令的compile 函数在每个子项上插入ng-disabled 属性。或者使用 parent't child 指令来表示要将 ng-disabled 应用到哪些孩子。

【讨论】：

因为我正在使用这个：ghiden.github.io/angucomplete-alt。这只是一个像这样的 div 元素：<div class="ng-isolate-scope" angucomplete-alt="" id="ex1" placeholder="Search countries" pause="100" selected-object="selectedCountry" local-data="countries" search-fields="name" title-field="name" minlength="1" input-class="form-control form-control-small" match-class="highlight"></div>

【解决方案4】：

有一个新选项可以控制 angucomplete-alt 的启用/禁用输入字段。 http://ghiden.github.io/angucomplete-alt/#example13

【讨论】：