AngularJSにjQueryプラグインを統合する正しい方法

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>

よろしくお願いします

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

ドキュメントにはいくつかのポイントがあります。あなたはそれらをここで見つけることができます：
一般的な落とし穴

コントローラーを正しく使用する

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

編集：を使用する代わりに、jQueryでAngularJSを$(element)使用するangular.element(element)ときに利用できます

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

シナリオは、サービスの依存性注入があるディレクティブを（持っている）持っていて、そのディレクティブからサービスにajax呼び出し（$ httpを使用）を要求するというものです。

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

コントローラーと分離スコープでディレクティブを作成しようとしました

すべてをコントローラーに移動したときだけ、魔法のように機能しました。

この例の例Angular JSでのjQueryプラグイン（RoyalSlider）の初期化