Angular 路由器，多次调用控制器

Question

这段代码可以正常工作，但还可以做得更好。我的问题：

如何在不再次调用控制器的情况下在许多状态下插入 navDetalle 或其他视图。

(function() {
  'use strict';

  angular
    .module('miApp')
    .config(routerConfig);

  var nav = {
    templateUrl: 'app/nav/nav.html',
    controller: 'NavController',
    controllerAs: 'nav'
  };
    var navInter = {
    templateUrl: 'app/nav/navInter.html',
    controller: 'NavController',
    controllerAs: 'nav'
  };
  var navDetalle = {
      templateUrl: 'app/navDetalle/navDetalle.html',
      controller: 'NavDetalleController',
      controllerAs: 'navDetalle'         
  };
  /** @ngInject */
  function routerConfig($stateProvider, $urlRouterProvider) {

    $stateProvider
      .state('home', {
        url: '/',
        views: {
            // the main template will be placed here (relatively named)
            'nav': nav,
            'carousel': {
              templateUrl: 'app/carousel/carousel.html',
              controller: 'CarouselController',
              controllerAs: 'carousel'
            },
            'footer':{
              templateUrl: 'app/footer/footer.html'
            }
        }
      })
      .state('detalle', {
        url: '/detalle/:idDetalle',
        views:{
            'nav': navInter,
            'detalle': {       
              templateUrl: 'app/detalle/detalle.html',
              controller: 'DetalleController',
              controllerAs: 'detalle'
            },
            'navdetalle': navDetalle,
            'footer':{
              templateUrl: 'app/footer/footer.html'
            }
        }

      })
      .state('resumen', {
        url: '/resumen',
        views:{
            'nav': navInter,
            'navdetalle': navDetalle,
            'footer':{
              templateUrl: 'app/footer/footer.html'
            }
        }

      })
      .state('success', {
        url: '/success',
        views:{
            'nav': navInter,
            'success': {       
              templateUrl: 'app/success/success.html',
              controller: 'SuccessController',
              controllerAs: 'success'
            },
            'navdetalle': navDetalle,
            'footer':{
              templateUrl: 'app/footer/footer.html'
            }
        }

      })
      .state('cancel', {
        url: '/cancel',
        views:{
            'nav': navInter,
            'navdetalle': navDetalle,
            'cancel': {       
              templateUrl: 'app/cancel/cancel.html',
              controller: 'CancelController',
              controllerAs: 'cancel'
            },
            'footer':{
              templateUrl: 'app/footer/footer.html'
            }
        }

      });

    $urlRouterProvider.otherwise('/');
  }
  
})();

如果您有其他改进建议，请发表评论

Answer 1

不知道你想要的能不能实现。因为 ui-router 总是为视图的控制器创建一个新实例，这是有道理的，因为每个视图都有自己的范围。

Answer 2

我不确定这是否可以防止每次都执行控制器。但是，我确实有另一种解决方案。那可能行得通。 Ionic Framework 通过保留控制器状态在内部执行此操作。

创建一个全局控制器并将其添加到 <body> 或 <html> 标记，以便它的作用域每次都可用。

app.controller('GlobalController', function($scope) {

    var navDetalleCtrlInstantiated = false;

    $scope.$on('$stateChangeStart', function(e, toState, toParams) {
        if (!navDetalleCtrlInstantiated && toState.views && toState.views.navdetalle) {
            // Do the common logic on controller instantiation

           // Mark so that we don't have to do the same logic again
            navDetalleCtrlInstantiated = true;
        }
    });
});

在您看来：

<body ng-controller="GlobalController">
</body>

并从您的 NavDetalleController 中删除逻辑。

Angular 路由器，多次调用控制器

Angular router, calling controller many times

router

controller

angularjs