web-dev-qa-db-ja.com

jQueryとAngularJSが連携しない

私はRequireJSとAngularを使用していますが、セットアップで一緒に機能しません。jQueryのバージョンが1.7.2の場合は問題なく動作します。しかし、jQuery 1.8.1とjQuery UIを使用したいと思っています。 angularアプリは、これを使用してメインモジュールを初期化できません。

ここに問題があります：

大文字と小文字を区別する変数：jQueryおよびjquery。 jquery 1.8.1ソースコードでは、終わりに向かってwindow.jQueryを定義しています。以前のバージョン1.7.2と同様に、window.jqueryが定義されていました。

アプリでjQuery UIを使用したいので、jquery-ui-1.8.23.custom.min.jsファイルを含めました。それを含めた後、「jQuery」が未定義であるというエラーが発生しました。

そこで、jQueryのバージョンをアップグレードして、上記の1.8.1バージョンをダウンロードすることにしました。 jQueryソースコードの終わりに向かって、このバージョンでwindow.jQueryが定義されていることがわかりました（jQuery UIで必要に応じて大文字と小文字を区別してください）。

Require-jquery JSをJames Burke githubプロジェクトの最新バージョンで更新し、jquery 1.8.1で更新しました。

しかし、更新されたjQuery/RequireJSプロジェクトを含めて、angularjsは機能しなくなりました。

Chrome console：

Console Output

1.7.2に戻した場合angularは機能します。または、jQueryファイルを編集してwindow.jQueryの代わりにwindow.jqueryを定義すると（大文字と小文字に注意）、再び機能します。ただし、jQuery UIはない.

javascriptjqueryjquery-uirequirejsangularjs
16
Sameer Gupta

$とjQueryをグローバル変数にするjQueryソースから行を削除して、このソリューションを修正しました。この行はwindow.jQuery = window.$ = jQueryのようになります。

RequireJSでAngularJSも使用していて、同様の問題が発生している場合は、これらの行を削除してください。

さらに、プロジェクトでは jqueryui-AMD を使用する必要があります。 Githubページからユーティリティをダウンロードすると、jQuery UIスクリプトがAMDモジュールに変換されます。

「ディレクティブ」と呼ばれるAngularJS機能を使用してHTML要素を拡張することで、jQuery UIコンポーネントを再利用可能な正しい方法で使用することができました。

私はプロジェクトに取り組んでいる間、AngularJSを嫌い、愛しており、Twitterの全員に私がAngularJSが嫌いであることを知らせることさえありました。ただし、先月2つのプロジェクトを実装して終了した後、いつ使用するか、いつ使用しないかについては、かなり良い考えを持っています。

AngularJSでのjQuery UIの使用法を示すために私が作成した1つのjsFiddleは次のとおりです。

http://jsfiddle.net/samunplugged/gMyfE/2/

3
Sameer Gupta

JQueryのnoConflictメソッドを使用することは、この問題に対するよりエレガントで将来性のあるソリューションです。

http://api.jquery.com/jQuery.noConflict/ に関する詳細なドキュメントを見る

更新（リンクからの例）：

<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
17
Ayame__

私の2日間の試行後にこれを簡単に修正します。

しようとすると

特定のSlider Jqueryファイルを直接view.htmlに含めます。 index.htmlファイルからjqueryを削除する

1
Deepak