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

时间:2013-06-05 08:32:35

标签: jquery-plugins angularjs

我想知道将jQuery插件集成到我的角度应用中的正确方法是什么。我找到了几个教程和屏幕转换,但它们似乎迎合了一个特定的插件。

例如: 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>

提前致谢

1 个答案:

答案 0 :(得分:143)

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

文档中有几点可供您查看。你可以在这里找到它们:
Common Pitfalls

Using controllers correctly

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

编辑:在使用带有jQuery的AngularJS时,您可以使用$(element)而不是angular.element(element)