AngularJS应用程序初始化两次(尝试了常见解决方案...)
AngularJS应用程序初始化两次(尝试了常见解决方案...)
已解决:
解决方法在这里:
https://stackoverflow.com/a/29662815/4004456
Batarang Chrome插件会将所有ng-click动作触发两次。我的代码没有问题,Batarang浪费了我的一个下午...
注意:我已经尝试了Combating AngularJS executing controller twice中的所有修复方法。
编辑:令人困惑的事情:
似乎所有的控制器都会初始化两次,不管哪个视图调用哪个函数,它都会被触发两次,这让我认为这是app.js文件中的一个问题...
编辑:我尝试过的解决方法:
- 我尝试逐个移除bower依赖项,以排除依赖项引起的问题。
- 我仔细检查了我的代码,查找了index.html中的双重控制器初始化问题,然后又在div/启动初始化中检查了一遍。
- 我逐个移除了自定义指令,以确保"restrict:"/控制器重复不会发生。
- 我从应用程序中移除了所有的ng-if语句。
- 我检查了所有html文件,查找了重复的ng-view/ui-view等。
- 尝试了所有路由和链接的组合,有或没有尾部斜杠。
然而,我的问题几乎与上述问题相同,我的控制器在按钮点击时会执行两次函数。
我尝试创建了一个plunkr,但代码太复杂,无法正常工作...我已经从下面的代码中删除了任何冗余。
index.html
app.js
'use strict'; /** * @ngdoc overview * @name smcmsApp * @description * # smcmsApp * * Main module of the application. */ angular .module('smcmsApp', [ 'ngAnimate', 'ngAria', 'ngCookies', 'ngMessages', 'ngResource', 'ngRoute', 'ngSanitize', 'ngTouch', 'ui.bootstrap', 'angular-spinkit', 'restangular' ]) .config(function ($routeProvider, RestangularProvider) { $routeProvider .when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl' }) .when('/about', { templateUrl: 'views/about.html', controller: 'AboutCtrl' }) .when('/sales', { templateUrl: 'views/sales.html', controller: 'SalesCtrl', resolve: { mailers: function (API) { return API.mailers.getList(); }, totals: function (Restangular) { return Restangular.all('profit').customGET(); } } }) .when('/design', { templateUrl: 'views/design.html', controller: 'DesignCtrl', resolve: { design: function (API) { return API.design.getList(); } } }) .otherwise({ redirectTo: '/' }); RestangularProvider.setBaseUrl('http://localhost/SMCMS_Angular/api/Slim/'); }) .run(function ($rootScope, $log) { $rootScope.stateIsLoading = false; $rootScope.$on('$routeChangeStart', function () { console.log("route change start"); $rootScope.stateIsLoading = true; }); $rootScope.$on('$routeChangeSuccess', function () { console.log("route change success"); $rootScope.stateIsLoading = false; }); $rootScope.$on('$routeChangeError', function () { //catch error console.log("Route changing animation error"); }); });
DesignCtrl.js
angular.module('smcmsApp') .controller('DesignCtrl', function ($scope, $log, design, Notifications, Data) { /* ------------------------- Order Interactions --------------- */ $scope.saveOrder = function (order) { Notifications.addAlert('error', 'called showModal() from design.js'); $log.debug("called showModal() from design.js"); }; });
views/design.html
问题的原因是应用程序在初始化过程中的处理方式。如果你导航到你的应用程序 http://example.com/,那么你的URL将是一个空字符串,并且触发路由更改。在解析失败后,它将触发 otherwise 并导致双重路由更改/初始化。
基本上,如果你在加载时自己启动路由,就不会看到双重更改。你可以在 run 中注入 $location 服务,并在其中自己定向,假设你想要从任何一个给定的点开始(参见 plunk:http://plnkr.co/edit/lTOSYX?p=preview)。
如果你的控制器重复加载,那么你可能还有其他复杂性,例如在注释中提到的双重控制器声明/执行问题(https://stackoverflow.com/questions/15535336)。
关于路由更改的 $log 的 .run 双重打印点赞,如果我直接导航到应用程序中的某个路由,那么 .run 只会触发一次。然而,在排除所有链接文章中的解决方法后,我只剩下了无效的解决方案。
请参阅帖子中的编辑,以了解已尝试的方法(包括链接问题中提供的所有修复方法和其他问题的修复方法)。
我也会将此添加到编辑中,但我将其定位为应用程序的初始化,因为应用程序中的所有控制器都会被激活两次,无论是哪个控制器/视图调用函数,都会触发两次。
是的,很高兴看到你找到了解决方法 🙂