Question

如何在ui-router中为状态添加多个控制器？

我经过长时间的努力搜寻，却发现没有任何帮助。哪里错了？我真的不知道该怎么办。我在下面写了所有细节。我尝试过但没有成功。

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

根据您的评论：

控制器：＆＃39; pagerCtrl＆＃39; //需要两个像控制器这样的控制器：＆＃39; pagerCtrl＆＃39; ，＆＃39; gridCtrl＆＃39;

我认为你想要ui元素的控制器。您可能想要使用或创建指令。例如，请查看ngTable和ng-Grid。

Answer 3

是的，如果你引用其他一些控制器信息，你将需要这个....只需添加一个控制器到状态，另一个你可以将它作为ng控制器嵌套在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'
        }
    }
})

ui-router中的状态控制器

4 个答案: