How to create a directive for disable all elements into div element

Question

how to create a directive for disable all elements into div element ?

something like this :

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

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

.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 the state is 'Success' or 'Error' or 'Warning' Input not disabled ?

Martin Probst · Accepted Answer · 2014-09-14 14:23:06Z

2

You can create a directive that alters its content during compile time by adding the condition. Something along these lines (untested):

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

See a JSFiddle here: http://jsfiddle.net/HB7LU/6380/

This has the drawback that you just copy the expression from contents-disabled into ng-disabled attributes of any inputs - if somebody uses a directive that in turn creates <input> elements, you won't pick them up.

It'd be less fragile to get hold of the FormController instance and iterate through all its controls, but sadly AngularJS doesn't expose the controls in a form. Maybe file a feature request?

edited Sep 14, 2014 at 14:23

answered Sep 13, 2014 at 11:45

Martin Probst

9,6816 gold badges34 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Martin Probst Over a year ago

@Football-Is-My-Life I think it's just because you have a ton of typos in your code. See here for a fiddle: jsfiddle.net/HB7LU/6380

snowindy Over a year ago

Could you share what is the reason of having empty cycle inside directive code (JsFiddle)?

snowindy Over a year ago

I updated your approach for case when elements already have ng-disable attribute present: jsfiddle.net/4yvza3xp/1

fieldset_killer · Accepted Answer · 2015-11-27 14:13:55Z

2

You also can use a tag fieldset :

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

With this way, when the variable foo is TRUE, inputs "the_one" and "the_second" will be disabled.

answered Nov 27, 2015 at 14:13

fieldset_killer

211 bronze badge

1 Comment

JesseNewman19 Over a year ago

fieldset disabling does not work in IE. (And safari, I believe)

Matt Way · Accepted Answer · 2014-09-13 11:25:33Z

0

Why don't you use ng-disabled on your required expression on each input?

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

If you truly do want a grouping directive, use the compile function of the directive to insert the ng-disabled attribute on each child. Or use a paren't child directive to signify which children to apply the ng-disabled to.

answered Sep 13, 2014 at 11:25

Matt Way

33.3k10 gold badges85 silver badges86 bronze badges

1 Comment

Football-Is-My-Life Over a year ago

Because I am using this : ghiden.github.io/angucomplete-alt. This is just a div element like this :

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

ghiden · Accepted Answer · 2014-09-20 09:32:51Z

0

There is a new option to control enable/disable input field for angucomplete-alt. http://ghiden.github.io/angucomplete-alt/#example13

answered Sep 20, 2014 at 9:32

ghiden

2,0831 gold badge17 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to create a directive for disable all elements into div element

4 Answers 4

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related