CODEWITHSUNDEEP
javascriptjqueryangularjsangular-directive
Shashank Vivek
Shashank Vivek

Reputation: 17514

Why toggle effect not working for nested div using angular Directive

I have attached the Plunker. I am unable to access .gc and .mc element . Although my code is working partially and class .bc is working as expected. I am trying to apply toggle effect on them and hierarchy wise

BroadCategory > GeneralCategory > MainCategory

Not sure what am I missing in

$(element).find('.gc').click( function() {
    alert('GC');
    $(element).find(".mc").slideToggle('200',function() {  
       $(element).find("span").toggleClass('faqPlus faqMinus');
    });
 });

Upvotes: 0

Views: 92

Answers (2)

brewsky
brewsky

Reputation: 617

When Angular links the BroadCategory div, the GeneralCategory (ng-repeat)elements have not yet been created yet. So the click handler is never added. Add the d-expand-collapse attribute to the .gc element. You should then see your click alert fire. 

<div d-expand-collapse ng-repeat="gen in group.items">

Upvotes: 1

Cameron
Cameron

Reputation: 434

Your function is being called before the ng-repeat that creates the .gc elements. A quick fix would be to wrap the function in a timeout to let it finish rendering. I'm sure there is a better way using some hook in angular, but this will accomplish what you want.

setTimeout(function () {
  $(element).find('.gc').click( function() {
    alert('GC');
    $(element).find(".mc").slideToggle('200',function() {  
      $(element).find("span").toggleClass('faqPlus faqMinus');
    });
  });
});

Upvotes: 1

Related Questions