将 jQuery 函数编写为 AngularJS 指令

Question

我需要写一个jQuery函数作为AngularJS指令 但我不知道如何在我的内部使用特定的 jqLite 函数 (closest, find..) 和 $(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，但我想在dividually 中触发每个 ibox。

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

Answer 1

你不应该那样使用 angular。

它可能有效，但您在代码中的注释已经告诉您原因

// This $timeout trick is necessary to run the Angular digest cycle

如果您在没有 angular observed 函数的情况下操作 DOM，您可能会得到意想不到的结果，并在 DOM 元素和 $scope 之间松散 "connection"。

我不确定我是否正确分析了您的函数的作用，但这里有一个示例 plunker 如何做到这一点：link

将 jQuery 函数编写为 AngularJS 指令

Writing a jQuery function as a AngularJS directive

jquery

angularjs

angularjs-directive

jqlite

angular-directive