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" undefined.

Итак, я решил обновить версию jQuery и загрузить указанную версию 1.8.1. К концу исходного кода jQuery я мог видеть, что эта версия определена window.jQuery(правильный случай, если необходимо, с помощью jQuery UI).

Я обновил мою jQuery-jquery с последней версией проекта Джеймса Берка github и обновил ее с помощью jquery 1.8.1.

Но включая обновленный проект jQuery/RequireJS, angularjs перестает работать.

Я получаю эту ошибку в консоли Chrome:

Console Output

Если я вернусь к 1.7.2 Angular работает. Или если я отредактирую файл jQuery, чтобы определить window.jquery вместо window.jQuery(обратите внимание на случай), он снова работает. Но это означает, что пользовательский интерфейс jQuery не будет.

Ответы

Ответ 1

Я исправил это решение, удалив строку из источника jQuery, которая сделала $и jQuery глобальными переменными. Эта строка выглядит примерно как window.jQuery = window.$ = jQuery.

Если вы также используете AngularJS с RequireJS и сталкиваетесь с аналогичной проблемой, удалите эти строки.

Кроме того, вам нужно будет использовать jqueryui-amd в вашем проекте. Загрузите утилиту с страницы Github и преобразуйте jQuery UI script в модули AMD.

Используя функцию AngularJS, называемую "директивами" для расширения HTML-элементов, я смог использовать компоненты пользовательского интерфейса jQuery многократно и разумно.

Я должен сказать, что я ненавидел и любил AngularJS во время работы над моим проектом, иногда даже позволяя всем в Twitter знать, что я ненавижу AngularJS. Однако после того, как я реализовал и завершил два проекта за последний месяц, у меня есть неплохая идея о том, когда его использовать и когда не использовать.

Вот один jsFiddle, который я создал, чтобы продемонстрировать использование jQuery UI с помощью AngularJS:

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

Ответ 2

Использование метода jQuery noConflict является более элегантным и перспективным решением этой проблемы.

Просмотр обширной документации по http://api.jquery.com/jQuery.noConflict/

UPDATE (пример из ссылки):

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

Ответ 3

Легко исправлено это после двухдневных попыток.

При попытке

Включите конкретные файлы JQuery слайдера непосредственно в view.html. удалить jquery из файла index.html