Angular 为所有站点运行 jQuery 代码

Posted

技术标签:

【中文标题】Angular 为所有站点运行 jQuery 代码【英文标题】:Angular run jQuery code for all site 【发布时间】:2016-06-08 09:31:15 【问题描述】:

我想在我的项目(基于 AngularJS 的项目)中实现 http://areaaperta.com/nicescroll/。

我需要做的是:

$(document).ready(

  function()  

    $("html").niceScroll();

  

);

但是,如果我需要它在整个站点中运行并且一旦 DOM 完成加载,我应该把它放在哪里?不确定一个指令是否是我需要的,如果需要,它会如何以及我应该在哪里包含/运行它?

【问题讨论】:

【参考方案1】:

在 Angular 项目中使用 jquery 插件的最佳方式是使用指令。

HTML:

…
<body ng-app="myApp" nicescroll>

</body>
…

JS:

…
var app = angular.module('myApp', []);

app.directive('nicescroll', function() 
    return 
        restrict: 'A',
        link: function() 
            // check, if the jquery plugin is loaded and available
            if ($.fn.niceScroll) 
                $('html').niceScroll();
            
        
    
);
…

【讨论】:

最好查看$.fn.niceScroll 已解决。太好了,我想制作一个控制器并将其放入主体中并执行上述操作,但这有效并且更清洁。

以上是关于Angular 为所有站点运行 jQuery 代码的主要内容,如果未能解决你的问题,请参考以下文章

在每个组件完成加载后如何在 Angular 2 中运行 jquery 函数

JSONP http请求在Angular中给出404

需要帮助将代码从 jQuery 调整为 Angular

如何在我的 Windows 桌面上运行 localhost 的移动设备上运行我的 Angular 站点[重复]

搜索单词并为其着色

仅在桌面站点上执行 jQuery - 不要在移动设备上执行 jQuery [重复]