2016-05-26 15 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がこの問題をチェックします(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は常にビューのコントローラに新しいインスタンスを作成するため、すべての単一のビューが独自のスコープを持つことになります。

関連する問題