How to create a directive to disable all elements in a div element

Question

how to create a directive to disable all elements in a div element?

something like that:

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

Is it possible? I have no idea.

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

            }
        };
    });

Update:

see this:

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

why When stateis there “Success” or “Error” or “Warning”, the input is not disabled?

Answer 1

You can create a directive that modifies its contents at compile time by adding a condition. Something along these lines (unchecked):

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

See JSFiddle here: 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 , "the_one" "the_second" .

Answer 3

ng-disabled ?

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

---

If you really need a grouping directive, use the compiledirective function to insert an attribute ng-disabledfor each child element. Or use the paren't directive for children to indicate which children to apply ng-disabledto.

Answer 4

There is a new option for controlling the on / off input field for angucomplete-alt. http://ghiden.imtqy.com/angucomplete-alt/#example13