将 jQuery 函数编写为 AngularJS 指令

Posted 2023-02-22

【中文标题】将 jQuery 函数编写为 AngularJS 指令

【英文标题】：Writing a jQuery function as a AngularJS directive

【发布时间】：2017-05-08 07:18:34

【问题描述】：

我需要编写一个 jQuery 函数 作为 AngularJS 指令，但我不知道如何使用特定的 jqLit​​e 函数 （最近的，找到..） 和 $(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，但我想单独触发每一个。

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

【问题讨论】：

为什么不使用现有的 Angular 指令，例如 ng-class？

我要和@jbrown 说同样的话。如果您要做的是更改触发器上的类而不是 ngClass 是您想要的。不要尝试移植 jquery，只需在 Angular 中重写即可。

【参考方案1】：

你不应该那样使用角度。

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

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

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

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

【讨论】：

这是一个不错的解决方案，但是这样我遇到了与上述相同的问题。如果我通过单击箭头图标触发 toggleCollapse 功能，每个 ibox 都会折叠。但我只想折叠我单击的 ibox。这是具有所描述行为的修改后的 plunker：ibox Plunker

这种行为是正常的，因为您没有使用指令的隔离范围。这就是原因，因为它在我上面的 plunker 中工作，因为我在指令中渲染 html 并且只能访问隔离范围。

创建一个独立的范围将scope: true,添加到你的指令对象plunker

很高兴为您提供帮助:)