将angularjs模块与离子框架链接时的冲突

时间:2015-12-06 05:54:49

标签: javascript html angularjs ionic-framework ionic

我正在尝试将现有的angularjs应用程序移植到离子。离子项目是用;

创建的
__block

然后,我将我的angularjs应用程序和离子应用程序中的链接组合在一起。

$ ionic start myApp tabs

我启动了Chrome浏览器并加载了网址http://127.0.0.1/ionicapp/www/ 遇到的错误是

  

未捕获错误:[$ injector:unpr]未知提供商:   $$ forceReflowProvider< - $$ forceReflow< - $$ animateQueue< - $ animate   < - $ compile< - $$ animateQueue   http://errors.angularjs.org/1.4.3/ $注射器/ unpr?P0 =%24%... 24forceReflowProvid eQueue%20%3 C-%20%24animate%20%3 C-%20%24compile%20%3 C-%20%24%24animateQueue

此错误来自<!--ionic links--> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel=" stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <link rel="stylesheet" href="../../bower_components/angular-material/angular-material.min.css"> <link rel="stylesheet" href="../../bower_components/ng-table/dist/ng-table.min.css"> <link rel="stylesheet" href="css/app.css"/> <!--<div ng-include src="'partials/header.html'"></div>--> </head> <body> <script src="../../bower_components/angular/angular.min.js"></script> <script src="../../bower_components/angular-animate/angular-animate.min.js"></script> <script src="../../bower_components/angular-aria/angular-aria.min.js"></script> <script src="../../bower_components/angular-material/angular-material.min.js"></script> <script src="../../bower_components/angular-route/angular-route.min.js"></script> <script src="../../bower_components/angular-moment/angular-moment.min.js"></script> <script src="../../bower_components/angular-cookies/angular-cookies.js"></script> <script src="../../bower_components/angular-google-chart/ng-google-chart.js"></script> <script src="../../bower_components/ng-table/dist/ng-table.js"></script> <script src="js/app.js"></script> <script src="js/services.js"></script> <script src="js/controllers-func.js"></script> <script src="js/controllers.js"></script> <script src="js/filters.js"></script> <script src="js/directives.js"></script>

我怀疑问题在于链接中的一些冲突。 ionic.bundle.js: 8900可能已包含一些angularjs代码。如果是,那么链接冲突应该如何协调?

1 个答案:

答案 0 :(得分:2)

提示可以在本文档中找到

http://ionicframework.com/docs/guide/starting.html

  

Ionic附带ngAnimate和ngSanitize捆绑,但要使用其他   您需要在lib / js / angular中包含它们的Angular模块   。目录

select add_transaction('T',30.5,15); 已与动画模块捆绑在一起。因此,当您在angularjs animate模块中进行链接时,您的html文件会产生冲突。

在你的html文件中,注释掉以下几行。这应该足以解决您的问题。

ionic.bundle.js

请注意,您的其他js模块需要放在<!--<script src="../../bower_components/angular/angular.min.js"></script>--> <!--<script src="../../bower_components/angular-animate/angular-animate.min.js"></script>--> 中。它们可以放在lib/js的子文件夹中。否则,它将在桌面浏览器上进行测试时运行良好,但无法在智能手机上运行。