将jQuery函数编写为AngularJS指令

我需要编写一个jQuery函数作为AngularJS指令，但我不知道如何在指令中使用特定的jqLite函数（最近的，查找…）和$（this）

我试过这样做：

jQuery版本：

$('.collapse-link').click(function () {
    var ibox = $(this).closest('div.ibox');
    var button = $(this).find('i');
    var content = ibox.find('div.ibox-content');

    content.slideToggle(200);
    button.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
    ibox.toggleClass('').toggleClass('border-bottom');

    setTimeout(function () {
        ibox.resize();
        ibox.find('[id^=map-]').resize();
    }, 50);
});

我的AngularJS指令：

.directive('iboxDirective', function($timeout){
      return{
        restrict: 'A',
        scope: {},
        link: function(scope, elem){
          elem.on('click', function(){
            var ibox = angular.element('div.ibox');
            var button = angular.element('i');
            var content = angular.element('div.ibox-content');

            content.slideToggle(200);
            button.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
            ibox.toggleClass('').toggleClass('border-bottom');

            // This $timeout trick is necessary to run the Angular digest cycle
            $timeout(function(){
              ibox.resize();
              ibox.find('[id^=map-]').resize();
            });
          });
        }
      }
    });

使用上述指令的HTML文件：

<div class="ibox float-e-margins">
   <div class="ibox-title">
      <h5>Aktivitäten</h5>
      <div class="ibox-tools">
        <a class="collapse-link" ibox-directive>
          <i class="fa fa-chevron-up"></i>
        </a>
       </div>
    </div>
    <div class="ibox-content">
       Content...
    </div>
</div>

阿克蒂维特十酒店
内容。。。

这样，该指令将触发所有ibox div，但我希望单独触发每个

---

我做错了什么？希望你能帮助我。

你不应该那样用

它可能会起作用，但代码中的注释已经告诉了您原因

//这个$timeout技巧是运行角度摘要循环所必需的

如果在没有角度观察函数的情况下操作DOM，可能会得到意外的结果，并且会导致DOM元素和$scope之间的“连接”松动

---

我不确定我是否正确地分析了你的函数的功能，但这里有一个例子：你为什么不使用现有的角度指令，例如ng类？我想说的是与@jbrown相同的事情。如果您试图做的是更改触发器上的类，而不是您想要的。不要尝试移植jquery，只需在Angular中重写即可。这是一个很好的解决方案，但通过这种方式，我遇到了与上述相同的问题。如果通过单击箭头图标触发toggleCollapse函数，则每个ibox都会折叠。但是我只想折叠我正在点击的ibox。下面是具有所述行为的修改后的plunker：这种行为是正常的，因为您不使用指令的隔离范围。这就是原因，因为它可以在我的plunker中工作，因为我在指令中呈现html，并且只能访问隔离范围。要创建隔离范围，请添加

scope:true，

to your指令对象乐于帮助：）