AngularJS应用程序初始化两次(尝试了常见解决方案...)

17 浏览
0 Comments

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

0
0 Comments

问题的原因是应用程序在初始化过程中的处理方式。如果你导航到你的应用程序 http://example.com/,那么你的URL将是一个空字符串,并且触发路由更改。在解析失败后,它将触发 otherwise 并导致双重路由更改/初始化。

基本上,如果你在加载时自己启动路由,就不会看到双重更改。你可以在 run 中注入 $location 服务,并在其中自己定向,假设你想要从任何一个给定的点开始(参见 plunk:http://plnkr.co/edit/lTOSYX?p=preview)。

如果你的控制器重复加载,那么你可能还有其他复杂性,例如在注释中提到的双重控制器声明/执行问题(https://stackoverflow.com/questions/15535336)。

关于路由更改的 $log 的 .run 双重打印点赞,如果我直接导航到应用程序中的某个路由,那么 .run 只会触发一次。然而,在排除所有链接文章中的解决方法后,我只剩下了无效的解决方案。

请参阅帖子中的编辑,以了解已尝试的方法(包括链接问题中提供的所有修复方法和其他问题的修复方法)。

我也会将此添加到编辑中,但我将其定位为应用程序的初始化,因为应用程序中的所有控制器都会被激活两次,无论是哪个控制器/视图调用函数,都会触发两次。

是的,很高兴看到你找到了解决方法 🙂

0