ui路由器中狀態的多個控制器

Question

如何在ui路由器中為狀態添加多個控制器？

我經過漫長而艱苦的搜索，但發現沒有任何幫助。 我哪里錯了？ 我真的不知道該怎么辦。 我在下面寫下了所有詳細信息。 我嘗試過但沒有成功。

angular.module('uiRouterApp.typeNews', [
        'uiRouterApp.typeNews.Service',
        'ui.router'
    ])
    .config(
        [
            '$stateProvider', '$urlRouterProvider',
            function($stateProvider, $urlRouterProvider) {
                $stateProvider
                    .state('detail', {
                        url: '/typeNews/detail/typeNewsId=:typeNewsId',
                        templateUrl: '/Scripts/ui-route/typeNews/typeNews.detail.html',
                        controller: [
                            '$scope', '$stateParams', '$state', 'typeNewsService',
                            function($scope, $stateParams, $state, typeNewsService) {
                                typeNewsService.readTypeNews($stateParams.typeNewsId)
                                    .success(function(data, status, headers, config) {
                                        $scope.typeNews = data;
                                    });
                            }
                        ]
                    })
                    .state('typeNews', {
                        url: '/typeNews/PageSize=:PageSize/PageIndex=:PageIndex',
                        templateUrl: '/Scripts/ui-route/typeNews/typeNews.html',
                        controller: 'pagerCtrl'// need two many controller like controller: 'pagerCtrl' , 'gridCtrl'
                    });
            }
        ]
    );

Answer 1

狀態提供程序中的每個狀態都映射到一個控制器。 具有多個（許多）控制器處理一個狀態是不可能的，並且與框架的基本概念背道而馳。

我不了解您要在一個狀態下使用多個控制器實現的目標。 您的想法是什么，該如何發揮作用？ 你可以解釋嗎？

您可以具有父狀態和子狀態，並且它們可以具有自己的控制器。 也許那可以幫助您。

Answer 2

根據您的評論：

控制器：'pagerCtrl'//需要兩個控制器，例如：'pagerCtrl'，'gridCtrl'

我認為您想要ui元素的控制器。 您可能要使用或創建一個指令。 以ngTable和ng-Grid為例。

Answer 3

是的，如果您引用其他一些控制器信息，則將需要此信息。...只需將一個控制器添加到狀態，您可以將另一個控制器作為ng-controller嵌套在html中。

JS片段

angular.module('xTimeApp').config(function ($stateProvider, $httpProvider) {
$stateProvider.state('editpayhistory', {
      url: '/payhistory/:id/edit',
      templateUrl: '../PayHist/PayHist-edit.html',
      controller: 'PayHistEditController'  //<-Controller 1
  });

HTML片段：

<div class="form-group">
<div data-ng-controller="AttendanceListController">   <!--Controller 2 -->
    <label for="title" class="col-sm-2 control-label">Attendance</label>
    <!--Need to compare with same object type, so create an empty _attend object with the payhist id as the _attend id field-->
    <div class="col-sm-10">
        <select ng-init="payhist._attend = {AC_CODEID: payhist.AC_CODEID}"
                ng-change="payhist.AC_CODEID = payhist._attend.AC_CODEID"
                ng-model="payhist._attend"
                ng-options="attend.AC_CODEID as attend.AC_NAME for attend in attends track by attend.AC_CODEID"></select>
    </div>
</div>

Answer 4

.state('app.somestate', {
    url : '/someurl',
    views:{
        'menuContent': {
            templateUrl: 'part1.html',
            controller: 'ACtrl'
        },
        'otherContent': {
            templateUrl: 'part2.html',
            controller: 'BCtrl'
        },
        'someotherContent': {
            templateUrl: 'part3.html',
            controller: 'CCtrl'
        }
    }
})