2016-05-26 105 views
1

此代碼功能正常,但它可以更好地工作。我的問題:角度路由器,多次呼叫控制器

如何我可以在沒有呼叫控制器再次插入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('/'); 
 
    } 
 
    
 
})(); 
 

,如果您在另一改進建議,請評論

+0

你是什麼意思插入navDetale? –

+0

@ShashankAgrawal navDetalle是一個查看狀態的對象,該對象聲明在頂部 –

+0

Brotha檢查這個[issue](https://github.com/angular-ui/ui-router/issues/1800) –

回答

0

我不確定這是否有可能阻止每次執行控制器。但是,我確實有另一種解決方案。這可能會起作用。 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刪除邏輯。

0

我不知道你想要什麼是可能的。因爲ui-router總是爲視圖的控制器創建一個新的實例,這很有意義,因爲每個視圖都有你自己的範圍。