16

私は 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 の必要に応じて正しい大文字と小文字が区別されます)。

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

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

Chrome コンソールで次のエラーが表示されます。

コンソール出力

1.7.2 angular に戻すと動作します。または、jQueryファイルを編集してwindow.jQueryの代わりにwindow.jqueryを定義すると(ケースに注意してください)、再び機能します。しかし、それは jQuery UI がそうしないことを意味します。

4

3 に答える 3

17

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>
于 2013-03-22T07:35:07.657 に答える
3

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

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

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

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

私は自分のプロジェクトに取り組んでいる間、AngularJS が大嫌いで、好きだったと言わざるを得ません。時には、私が AngularJS が嫌いだと Twitter でみんなに知らせることさえあります。しかし、先月 2 つのプロジェクトを実装して終了した後、いつ使用し、いつ使用しないかについてかなり良い考えを持っています。

以下は、AngularJS で jQuery UI を使用する方法を示すために作成した jsFiddle の 1 つです。

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

于 2012-09-22T20:33:14.287 に答える