如何在使用具有嵌套视图的 ui 路由器时添加用户控制器

How to add user controller when using ui-router with nested views?

本文关键字：路由器 ui 添加 控制器 用户 视图 嵌套      更新时间：2023-09-26

我正在使用带有嵌套视图的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），控制器永远不会激活。以下是相关代码的其余部分：

用户.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语法。然而，这种方法也没有奏效。任何帮助将不胜感激。谢谢

据我所知，您正在尝试为所有 ui 视图使用一个控制器UserPageController，然后它们有自己的控制器。

所以我假设您希望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中，你可以使用这样的ui视图：

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

现在，app.user.dashboard的每个子状态都将具有可以从中继承的UserPageController的父控制器，同时它们也可以拥有自己的控制器。

如果您处于app.user.dashboard状态并且您过渡到 app.user.dashboard.eventTable ，您仍将处于app.user.dashboard，但是现在app.user.dashboard.eventTable将是父状态中的一种"子状态"，而不必离开父状态，至少在 UI 方面。

请注意，如果您在app.user.dashboard上没有任何默认内容，那么您可能希望过渡到某个默认子状态，这样您就不会留下一些空白屏幕。

您可以通过首先在app.user.dashboard状态中添加默认参数来执行此操作：

$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);
        }
    });

上面的代码基本上会在你去app.user.dashboard时检查defaultChildState属性，然后它会进入那个状态。所以任何时候你去app.user.dashboard，你实际上要app.user.dashboard.eventTable，或者你命名的任何其他默认状态。

相关文章：