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

Question

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

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

请帮助我！

Answer 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