Angular JS 与 Jquery 冲突

Angular JS conflict with Jquery

我正在使用 Angular 开发小部件。

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

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

但是如果我在 script.js 之前包含来自 index.html 的 jQuery js(尝试过 <2 和 >2 版本)文件,那么它会导致来自 [=42 的脚本错误=] 图书馆.

这是我得到的错误:Uncaught Error: [$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=preview

有人对这个问题有任何想法吗?

创建模块之前应用 ng-app 的顺序似乎有问题。 手动 bootstrap 而不是添加 ng-app 属性可能 better/more 可靠:

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

这样您就可以控制 bootstrap 发生的时间,这应该只发生在所有内容加载之后(在 scriptLoadHandler 中)

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