Angular JS 与 Jquery 的冲突 [英] Angular JS conflict with Jquery

问题描述

我正在使用 Angular 开发一个小部件.

I am developing a widget using Angular.

我有一个 index.html 文件和 script.js 文件.从 index.html 我包含了 script.js 文件.

I have an index.html file and script.js file. From the index.html i included the script.js file.

scripts.js 文件正在检查 Angular 是否已经加载.如果未加载 Angular，则将最新的 Angular.min.js(尝试 1.3.14 版本)动态附加到 head 标记.在 Angular 加载成功后，我创建了像 angular.module("widgetApp", []) 这样的 angular 模块.这工作正常.

The scripts.js file is checking the Angular is already loaded or not. If the Angular is not loaded then latest Angular.min.js (tried 1.3.14 version) is dynamically appended to the head tag. And on success of Angular load I created angular module like angular.module("widgetApp", []). This is working fine.

但是如果我在 script.js 之前包含了 index.html 中的 jQuery js(尝试了 <2 和 >2 个版本)文件，那么它会生成脚本角度库中的错误.

But if I included a jQuery js (tried <2 and >2 versions) file from index.html just before the script.js, then it makes script errors from angular library.

这是我得到的错误:未捕获的错误:[$injector:modulerr] http://errors.angularjs.org/1.3.12/$injector/modulerr?p0=myWidgetApp&p1=Err...gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.12%2Fangular.min.js%3A17%3A381).

我为此问题创建了一个 plunker:http://plnkr.co/edit/JHDrGakpuLWpfeauUs1V?p=预览

I have created a plunker for this issue: http://plnkr.co/edit/JHDrGakpuLWpfeauUs1V?p=preview

任何机构对这个问题有任何想法?

Any body have any idea on this issue?

推荐答案

在创建模块之前应用 ng-app 的顺序似乎有问题.手动引导而不是添加 ng-app 属性可能更好/更可靠:

It seemed to be a problem with the order of ng-app being applied before the module was created. It's probably better/more reliable to manually bootstrap instead of adding the ng-app attribute:

angular.bootstrap(document, ['myWidgetApp'])

这样你就可以控制引导程序何时发生，这应该只在所有东西都加载之后(在 scriptLoadHandler 中)

This way you can control when the bootstrap happens, which should only be after everything is loaded (in scriptLoadHandler)

这是工作的 plunkr:http://plnkr.co/edit/DKlh5S1ZisxIwluXeJ38?p=preview

Here's the working plunkr: http://plnkr.co/edit/DKlh5S1ZisxIwluXeJ38?p=preview

这篇关于Angular JS 与 Jquery 的冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！