如何添加用戶控制器時使用ui路由器嵌套視圖？

Question

我使用嵌套視圖ui-router在用戶個人資料頁面上顯示包含用戶數據的幾個表。下面是路由的概述：

routes.config.js

(function() { 
    'use strict'; 

    angular.module('app.routes').config(routesConfig); 

    routesConfig.$inject = ['$stateProvider', '$locationProvider', '$urlRouterProvider', 'RouteHelpersProvider']; 
    function routesConfig($stateProvider, $locationProvider, $urlRouterProvider, helper){ 

     // Set the following to true to enable the HTML5 Mode 
     // You may have to set <base> tag in index and a routing configuration in your server 
     $locationProvider.html5Mode(false); 

     // defaults to dashboard 
     $urlRouterProvider.otherwise('/app/home'); 

    // 
    // Application Routes 
    // ----------------------------------- 
    $stateProvider 
     .state('app', { 
      url: '/app', 
      abstract: true, 
      templateUrl: helper.basepath('app.html'), 
      resolve: helper.resolveFor('fastclick', 'modernizr', 'icons', 'screenfull', 'animo', 'sparklines', 'slimscroll', 'classyloader', 'toaster', 'whirl','loaders.css', 'spinkit','jquery-ui', 'jquery-ui-widgets','weather-icons', 'skycons') 
     }) 
     .state('app.home', { 
      url: '/home', 
      title: 'Home', 
      templateUrl: helper.basepath('home.html'), 
     }) 
     .state('app.user', { 
      abstract: true, 
      templateUrl: helper.basepath('user.html'), 
      // controller: 'UserPageController', 
      // controllerAs: 'userCtrl', 
      resolve: helper.resolveFor('datatables') 
     }) 
     .state('app.user.dashboard', { 
      url: '/user', 
      title: 'User', 
      controller: 'UserPageController', 
      controllerAs: 'userCtrl', 
      views: { 
      'eventTable': { 
       templateUrl: helper.basepath('userProfile/eventTable.html'), 
       controller: 'EventTableController', 
       controllerAs: 'eventCtrl' 
      }, 
      'bankStatement': { 
       templateUrl: helper.basepath('userProfile/bankStatement.html'), 
       controller: 'BankStatementController', 
       controllerAs: 'bankCtrl' 
      }, 
      'purchasesTable': { 
       templateUrl: helper.basepath('userProfile/purchasesTable.html'), 
       controller: 'PurchasesTableController', 
       controllerAs: 'purchasesCtrl' 
      }, 
      'paymentsTable': { 
       templateUrl: helper.basepath('userProfile/paymentsTable.html'), 
       controller: 'PaymentsTableController', 
       controllerAs: 'paymentsCtrl' 
      },    
      'clicksTable': { 
       templateUrl: helper.basepath('userProfile/clicksTable.html'), 
       controller: 'ClicksTableController', 
       controllerAs: 'clicksCtrl' 
      }, 

      } 
     }); 
    } // routesConfig 

})(); 

當我嘗試添加另一個控制器來顯示用戶的基本信息（我已經嘗試添加控制器app.user和app.user.dashboard）的控制器從未激活。下面是相關代碼的其餘部分：

user.html

<h3 class="fixedSubHeader">{{userCtrl.userInfo}}</h3> 
<section ui-view="eventTable"></section> 
<section ui-view="bankStatement"></section> 
<section ui-view="paymentsTable"></section> 
<section ui-view="purchasesTable"></section> 
<section ui-view="clicksTable"></section> 

userPage.controller.js

(function() { 
    'use strict'; 

    angular 
     .module('app.userPage') 
     .controller('UserPageController', UserPageController); 

    UserPageController.$inject = ['$resource']; 
    function UserPageController($resource) { 
     var vm = this; 
     activate(); 
     // console.log("USER!!!!!"); 

     //////////////// 

     function activate() { 

      // Ajax 

      $resource('server/basic-info-table.json').query().$promise.then(function(userInfo) { 
      vm.userInfo = userInfo; 

      }); 
     } 
    } 
})(); 

我本來以爲這是與userPage控制器有問題，所以我嘗試注入$scope並擺脫var vm = this語法。然而，這種方法也沒有奏效。任何幫助將不勝感激。謝謝

Answer 1

從我看到的，你試圖使用一個控制器UserPageController所有的UI視圖，然後他們有他們自己的控制器。

所以我假設你想UserPageController是所有這些UI視圖的父控制器。要做到這一點，那些應該都是他們自己的狀態。讓他們成爲app.user.dashboard的孩子狀態。

例如：

$stateProvider 
     .state('app.user.dashboard', { 
      url: '/user', 
      title: 'User', 
      controller: 'UserPageController', 
      controllerAs: 'userCtrl' 
     }) 
     .state('app.user.dashboard.eventTable', { 
      views: { 
       'eventTable@dashboard': { 
        templateUrl: helper.basepath('userProfile/eventTable.html'), 
        controller: 'EventTableController', 
        controllerAs: 'eventCtrl' 
       } 
      } 
     }, 
     // Repeat the other states here... 
    ); 

而且在user.html，你可以使用一個用戶界面視圖像這樣：

<section ui-view="eventTable@dashboard"></section>

現在的app.user.dashboard每一個孩子的狀態將有UserPageController父控制器他們可以繼承，而他們也可以擁有自己的控制器。

如果你在app.user.dashboard狀態，你過渡到app.user.dashboard.eventTable，你仍然會在app.user.dashboard，但是現在app.user.dashboard.eventTable將是一種「子狀態」雙親狀態中，而不必離開雙親狀態，至少就用戶界面而言。

---

請注意，如果你沒有任何形式的默認內容上app.user.dashboard，那麼你會希望這樣你就不會用一些空屏幕左側過渡到一些默認的子狀態。

您可以通過在你的app.user.dashboard狀態首先將默認PARAM做到這一點：

$stateProvider 
     .state('app.user.dashboard', { 
      url: '/user', 
      title: 'User', 
      controller: 'UserPageController', 
      controllerAs: 'userCtrl' 
      defaultChildState: 'app.user.dashboard.eventTable' 
     }) 
     // ... 

...，然後在run塊，添加如下內容：

$rootScope.$on('$stateChangeStart', function(event, toState, toParams) { 
     if (toState.defaultChildState) { 
      event.preventDefault(); 
      $state.go(toState.defaultChildState, toParams); 
     } 
    }); 

以上代碼將基本檢查defaultChildState屬性，當你去app.user.dashboard，然後它會進入該狀態。所以任何時候你去app.user.dashboard，你實際上會去app.user.dashboard.eventTable，或其他任何你默認的狀態。