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.module("widgetApp", [])这样的角模块.一切正常.

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.

这是我得到的错误: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).

我为此问题创建了一个插件: 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)

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

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