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

我想知道怎样才能将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>

谢谢提前

当前回答

我已经遇到过2次指令和服务/工厂运行不好的情况。

这个场景是，我有一个指令，它有一个服务的依赖注入，从这个指令中，我要求服务进行ajax调用(使用$http)。

最后，在这两种情况下ng-Repeat根本没有文件，即使我给数组一个初始值。

我甚至尝试用一个控制器和一个隔离作用域来做一个指令

只有当我把所有东西都移动到控制器上时，它才像魔法一样工作。

在Angular JS中初始化jQuery插件RoyalSlider

2015-09-10 09:38:17

其他回答

是的，你说得对。如果你正在使用jQuery插件，不要把代码放在控制器中。相反，创建一个指令，并将你通常拥有的代码放在指令的link函数中。

文档中有几个要点可以参考。你可以在这里找到它们: 常见的陷阱

正确使用控制器

确保当你在视图中引用脚本时，你是在angularjs库、控制器、服务和过滤器被引用之后最后引用它。

编辑:在使用AngularJS和jQuery时，你可以使用angular.element(element)，而不是使用$(element)

2013-06-05 08:43:54