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
中)
我正在使用 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
中)