web-dev-qa-db-ja.com

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>

どうもありがとう

jquery-pluginsangularjs
217
Gidon

はい。それで合っています。 jQueryプラグインを使用している場合は、コードをコントローラに入れないでください。代わりにディレクティブを作成し、通常はディレクティブのlink関数の中に入れます。

あなたが見てみることができるという文書内のポイントがいくつかあります。あなたはそれらをここで見つけることができます：
よくある落とし穴

コントローラを正しく使う

ビューでスクリプトを参照しているときは、必ずそれを最後に参照してください。angularjsライブラリ、コントローラ、サービス、およびフィルタが参照された後です。

編集：$(element)を使うのではなく、jQueryでAngularJSを使うときはangular.element(element)を使うことができます。

143
callmekatootie

ディレクティブやサービス/工場がうまくいかなかった2つの状況があります。

シナリオは、私がサービスの依存性注入を持つディレクティブを持っていて（持っていた）、そのディレクティブから（$ httpで）ajax呼び出しをするようにサービスに依頼することです。

結局、どちらの場合も、配列に初期値を指定してもng-Repeatはまったくファイルされませんでした。

私はコントローラと独立スコープでディレクティブを作ろうとさえしました

私がすべてをコントローラーに移したときだけ、それは魔法のように働いた。

この例はこちら Angular JSでjQueryプラグイン（RoyalSlider）を初期化する

0
bresleveloper