为什么切换效果不适用于使用 angular 指令的嵌套 div

Question

我附上了Plunker。我无法访问 .gc 和 .mc 元素。尽管我的代码部分工作并且 class .bc 按预期工作。我正在尝试对它们和层次结构明智地应用切换效果

BroadCategory > GeneralCategory > MainCategory

不确定我错过了什么

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

Answer 1

您的函数在创建 .gc 元素的 ng-repeat 之前被调用。一个快速的解决方法是将函数包装在超时中以让它完成渲染。我确信在 angular 中使用一些钩子有更好的方法，但这将完成你想要的。

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

Answer 2

当 Angular 链接 BroadCategory div 时，尚未创建 GeneralCategory (ng-repeat) 元素。因此永远不会添加点击处理程序。将 d-expand-collapse 属性添加到 .gc 元素。然后你应该看到你的点击警报触发。

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

为什么切换效果不适用于使用 angular 指令的嵌套 div

Why toggle effect not working for nested div using angular Directive

javascript

jquery

angularjs

angular-directive