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删除逻辑。

角度路由器，多次调用控制器

2 个答案: