Angular directive using jquery to disable all child elements does not work when using ng-include for parent node

Question

I have a directive that uses jquery to disable all child elements inside a div. Because it's a big page with a lot of controls, I am using ng-include to point to other html markups. The issue I'm encountering is that in some way the content of my div loads after my jquery from my directive applies. I cannot use fieldset with ng-disabled because this app is designed on purpose for IE and IE does not support ng-disabled on fieldset (yeah...I know...sad, but it's a company policy).

angular directive:

app.directive('jqDisable', function() {
  var linkFunction = function(scope, element, attributes) {
      $(element).find('*').attr("disabled", true);
  };

  return {
    link: linkFunction
  }

});

html markup:

  <div ng-include src="'schedulerOneTimeOccurence.html'" jq-disable="true">

  </div>

plunker link: http://plnkr.co/edit/jc9eCA?p=preview

Thx

giladk · Accepted Answer · 2016-04-26 08:25:38Z

1

You can simply move your directive: jq-disable="true" to 'schedulerOneTimeOccurence.html'.

  <div class="form-horizontal" ng-controller="ctrl" jq-disable="true" >
    <input type="text" datepicker-popup="MM/dd/yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="" ng-required="true" />
    <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
    <button ng-click="btnclick()">click</button>
  </div>

plunker link: http://plnkr.co/edit/QaCWcdnNyvnyMS2LLsbJ?p=preview

answered Apr 26, 2016 at 8:25

giladk

1766 bronze badges

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

1 Comment

Sergiu Paraschiv Over a year ago

Do a console.log($(element).find('*')); inside jqDisable. You basically need to wait for the template to be included (async task) before you apply the directives. Simple way to fix this is, like this answer says, to use jq-disable inside the included template.

sam1188 · Accepted Answer · 2016-04-26 08:28:24Z

0

i see no reason to use ng-incluce, why not use templateUrl

<div jq-disable="true"></div>

and in your directive:

app.directive('jqDisable', function() {
  var linkFunction = function(scope, element, attributes) {
      $(element).find('*').attr("disabled", true);
  };

  return {
    link: linkFunction,
    templateUrl: 'schedulerOneTimeOccurence.html'
  }

});

answered Apr 26, 2016 at 8:28

sam1188

991 silver badge6 bronze badges

3 Comments

giladk Over a year ago

This will make the directive work only with this specific container, which is not so recommended

sam1188 Over a year ago

why it is isn't recommended? thats the hole concept of directives

giladk Over a year ago

This directive is for making the elements in container disable. and you want to make it reusable. it should be useful for any container. so.. for that kind of directive it's pretty bad practice to add templateUrl

Collectives™ on Stack Overflow

Angular directive using jquery to disable all child elements does not work when using ng-include for parent node

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related