在AngularJS中集成jQuery插件的正确方法

217

我想知道将jQuery插件集成到我的angular应用程序中的正确方法是什么。我发现了一些教程和屏幕录像，但是它们似乎适合特定的插件。

例如：http : //amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/ http://www.youtube.com/watch?v=8ozyXwLzFYs

我应该像这样创建指令吗？

App.directive('directiveName', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).'pluginActivationFunction'(scope.$eval(attrs.directiveName));
        }
    };
});

然后在html中调用脚本和指令？

<div directiveName ></div>
<script type="text/javascript" src="pluginName.js"></script>

提前谢谢

jquery-plugins angularjs

— 吉登
source

是的，最好的方法是将所需的jQuery插件包装在指令中，这样您就可以受益于范围变量并控制初始化/方法调用。

— Bhaskara Kempaiah 2013年

我不知道我在任何情况下对评估的感觉……听说它只是不好的做法

— sksallaj 2015年

应该$(element).pluginActivationFunction(scope.$eval(attrs.directiveName));没有引号。

— Maxim Zubarev

Answers:

143

是的，你是对的。如果您使用的是jQuery插件，请不要将代码放在控制器中。而是创建一个指令，并将您通常具有的代码放入该指令的link函数中。

您可以查看文档中的几点。您可以在这里找到它们：
常见陷阱

正确使用控制器

确保在视图中引用脚本时，在引用angularjs库，控制器，服务和过滤器之后，最后引用该脚本。

编辑：$(element)可以使用angular.element(element)jQuery与AngularJS结合使用，而不是使用

— Callmekatootie
source

允许HTML内容的jQuery插件的参数如何？（例如，如果我想ng-click通过此纯文本HTML参数添加指令）

— Fractaliste 2014年

@Fractaliste不确定您的意思。能给我举个例子吗？

— callmekatootie 2014年

你能解释一下所有$（element）。'pluginActivationFunction'（scope。$ eval（attrs.directiveName））到底是做什么的吗？是什么意思？

— Gaurav_soni 2014年

我几乎是angularjs的新手。我试图使用几个jquery插件，但都没有用。我们真的需要这样做吗？他们不能只是沿着angularjs工作吗？对我来说听起来很简单。

— Moebius

为什么脚本需要排在最后？

— Mike R

我有2种情况，其中指令和服务/工厂不能很好地发挥作用。

场景是我有一个具有服务依赖注入的指令，并从该指令中请求服务进行ajax调用（使用$ http）。

最后，在这两种情况下，即使当我给数组一个初始值时，ng-Repeat都没有归档。

我什至尝试用控制器和隔离范围的指令

只有当我将所有东西都移到控制器上时，它就像魔术一样工作。

有关此示例，在Angular JS中初始化jQuery插件（RoyalSlider）

— 布雷斯平歌剧院
source