Question

如何创建一个指令来禁用所有元素到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成功＆＃39;或者＆＃39;错误＆＃39;或者＆＃39;警告＆＃39;输入未禁用？

Answer 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不会在窗体中公开控件。也许提交功能请求？

Answer 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”将被禁用。

Answer 3

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

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

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

Answer 4

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

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

4 个答案: