使用 AngularJS 自定义指令启动 jQuery 函数

Posted 2023-05-09

【中文标题】使用 AngularJS 自定义指令启动 jQuery 函数

【英文标题】：Initiate jQuery function by using AngularJS custom directive

【发布时间】：2019-09-17 22:37:55

【问题描述】：

这是我想调用$('.ams-items').slimScroll()函数的代码

angular.element(document).ready(function () 
  $('.ams-items').slimScroll(
    alwaysVisible: true
  );
); 

请帮帮我！

【问题讨论】：

请阅读How to create a Minimal, Complete, and Verifiable example 和How do I ask a good question?。您的问题不符合社区的准则，很快就会被版主关闭。如果您希望得到任何答案，您应该适当地编辑它。好的问题通常包括：期望的结果或结果、到目前为止您为解决问题所做的尝试等等。

【参考方案1】：

如何在自定义指令中封装 jQuery 代码¹

任何操作 DOM 的 jQuery 代码都应该封装在 custom directive 中，以便在 AngularJS 框架实例化元素时执行。

app.directive("mySlimScroll", function()
     return 
         link: postLink,
     ;
     function postLink(scope,elem,attrs) 
         elem.slimScroll(
             alwaysVisible: true
         );
     
);

用法：

<div class="ams-items" my-slim-scroll>
</div>

要使用 jQuery，只需确保它在 angular.js 文件之前加载。

有关详细信息，请参阅

AngularJS Developer Guide - Creating Custom Directives AngularJS angular.element API Reference