Angularjs ui路由器中状态的多控制器

如何在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'
                    });
            }
        ]
    );

---

状态提供程序中的每个状态都映射到单个控制器。 让多个控制器处理一个状态是不可能的，这违反了框架的基本概念

我不明白在一个状态下使用多个控制器想要实现什么。 你的想法是什么？它应该如何发挥作用？你能解释一下吗

您可以有父状态和子状态，它们可以有自己的控制器。也许这能帮你解决问题。

根据你的评论：

控制器：'pagerCtrl'//需要两个类似控制器的控制器：'pagerCtrl'，'gridCtrl'

---

我认为您需要ui元素的控制器。您可能想要使用或创建一个指令。看一看，例如。

是的，如果你引用了其他一些控制器信息，你将需要这个。只需在状态中添加一个控制器，另一个可以将其嵌套为html中的ng控制器

JS代码段

HTML代码段：

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

<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>

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