Question

背景

我在一个使用angularjs的项目中具有以下环境规范：

Angularjs 1.7.2
Webpack 4.15.1-CLI 3.0.1
@ uirouter / angularjs 1.0.18

问题

我有一个控制器在状态更改时运行两次。

到目前为止我做了什么？

我在Google上搜索并阅读了有关此问题的大多数文章。甚至我也找到了不错的文章here。它讨论了此问题的所有可能原因。因此，我重新检查了以下内容：

我的html标签和body标签上都没有ng-app指令。
在调用指定控制器的页面上没有ng-controller指令
状态内部只有一个视图使用该控制器
与控制器名称没有冲突
没有未封闭的指令。
Angularjs加载一次。

但是没有运气！

代码示例

国家声明

.state('konsol.store.type.order.detail', {
        url: '/:orderCode/detail',
        views: {
          'navbar@': {
            template: require('./views/store-navbar.view.html'),
            controller: 'StoreNavbarController as vm'
          },
          'main@': {
            template: require('./views/order-management/order.view.html'),
            controller: 'StoreOrderController as vm'
          }
        },
        resolve: {
          currentState: function () {
            return 'konsol.store.type.order';
          },
          storeId: ['$stateParams', function ($stateParams) {
            return $stateParams.storeId;
          }],
          orderCode: ['$stateParams', function ($stateParams) {
            return $stateParams.orderCode;
          }],
          Orders: ['$stateParams', 'SomeService' function ($stateParams, SomeService) {
            return SomeService.getOrders($stateParams.storeId)
            // Here I make an http request to some API. This is Important for the last part of the question
          }],
          // Some other stuff ...
        }
      })

控制器

(function () {
  'use strict';

  angular.module('ic.konsol')
    .controller('StoreOrderController', StoreOrderController);

  // some injections they work fine
  StoreOrderController.$inject = ['$mdDialog','$window','$timeout','$rootScope','$stateParams','StoreOrderService','ShippingService','orders','store','businessPartnershipContract','shippingCompanies'];

  function StoreOrderController($mdDialog,$window,$timeout,$rootScope,$stateParams,StoreOrderService,ShippingService,orders,store,businessPartnershipContract,shippingCompanies
  ) {
    var vm = this;
    vm.someText = 'Simple Text';
    alert();
  }
})();

查看

<h1>{{ vm.someText }}</h1>

输出：

程序正常运行，没有错误。它会打印简单文本，但会在控制器内两次运行alert()

最后一个重要细节

在状态解析中，我向一些API发出了http请求。在浏览器的开发人员模式下，我查看了“网络”选项卡，并观察到它仅发送一个请求。不是两个。所以我认为正在发生的事情与控制器本身有关。

问题

地球上有人可以告诉我为什么我的控制器运行两次吗？

Answer 1

这是因为您为控制器StoreNavbarController和StoreOrderController使用了相同的别名，可以更改它并尝试使用。

Angularjs控制器有趣地运行两次

1 个答案: