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服务1}}服务将被传递（再次以Data的名义）。

<子> 对于它的价值，我也相信一个指令在这里更合适......

这是什么解决方案？想要重复使用具有不同数据的相同控制器

1 个答案: