这里的解决方案是什么?希望用不同的数据重复使用同一个控制器

Question

我有一个类似的网格

<div ng-controller="UserCtrl">
    ...
    <div class="grid">
        <div class="grid-header">
            <h3>Showing {{users.records}} Users</h3>
        </div>
        <div class="grid-con">
            <div class="grid-con-header row">
                <div ng-click="sortOrder($event, 'fullName')" class="col-xs-4 sortable"><span>Name</span></div>
                <div ng-click="sortOrder($event, 'emailAddress')" class="col-xs-4 sortable"><span>Email</span></div>
                <div class="col-xs-4"></div>
            </div>
            <div class="grid-con-body">
                <div ng-hide="isGridLoading" class="row" ng-repeat="row in users.rows">
                    <div class="col-xs-2">                            
                        <a href="users/modify/1">{{row.fullName}}</a>
                    </div>
                    <div class="col-xs-3">{{row.emailAddress}}</div>
                    <div class="col-xs-3">
                        <a ng-href="#/users/modify/{{row.loginId}}" type="button" class="btn btn-success">Modify</a>
                    </div>
                </div>                    
                <div class="row ajax-ngview" ng-show="isGridLoading"></div>
            </div>
        </div>
    </div>
</div>

这是我的UserCtrl

function UsersCtrl($scope, Users) {
    $scope.grid = {
        "_search": '',
        "page": 1,
        "rows": 10,
        "sidx": "loginId",
        "sord": "asc"
    };
    $scope.users = {};    
    updateGrid();
    function updateGrid() {
        $scope.isGridLoading = true;
        Users.get($scope.grid).$promise.then(function(result) {
            $scope.users = result;
            $scope.isGridLoading = false;            
        }, function(reason) {
        });
    }
    $scope.sortOrder = function(event, name) {
        ...
    }
}

我想在多个页面上显示这种类型的网格，我不确定这里的最佳解决方案是什么。我需要复制UserCtrl并将其粘贴为类似GroupCtrol的内容，然后根据需要进行修改吗？或者有更好的解决方案吗？

Answer 1

您可以使用$routeProvider的resolve属性，将适当的模型作为依赖项传递：

/* First "generify" the controller */
angular.module('myApp').controller('gridCtrl', function ($scope, Data) {
    $scope.grid = {
        "_search": '',
        "page": 1,
        "rows": 10,
        "sidx": "loginId",
        "sord": "asc"
    };
    $scope.data = {};
    updateGrid();
    function updateGrid() {
        $scope.isGridLoading = true;
        Data.get($scope.grid).$promise.then(function (result) {
            $scope.data = result;
            $scope.isGridLoading = false;
        }, function (reason) {...});
    }
    ...
/* Second, configure $routeProvider to pass 
 * the appropriate model to each view */
angular.module('myApp').config(function ($routeProvider) {
    $routeProvider
    .when('/users', {
        templateUrl: 'grid.html',
        controller:  'gridCtrl',
        resolve: {
            Data: 'Users'
        }
    })
    .when('/groups', {
        templateUrl: 'grid.html',
        controller:  'gridCtrl',
        resolve: {
            Data: 'Groups'
        }
    });

因此，在第一种情况下，Users服务将作为依赖项传递给gridCtrl控制器（以Data的名称），而在第二种情况下将传递Groups服务（再次以Data的名称）。

---

_{就其价值而言，我也相信在这里制定一项指令会更合适。。。}