Angularjs 这里的解决方案是什么？要使用不同数据重复使用同一控制器吗

我有一个这样的网格

<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并将其粘贴为类似GroupCtrol的格式，然后根据需要对其进行修改？还是有更好的解决方案？

您可以使用的

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'
        }
    });

因此，在第一种情况下，

用户

服务将作为依赖项传递给

gridCtrl

控制器（以

数据

的名义），而在第二种情况下，

组

服务将被传递（同样以

数据

的名义）

---

值得一提的是，我也相信在这里制定一个指令会更合适。。。

---

您是否在问如何实现一个通用网格，该网格可以与各种模型一起工作？对我来说，这听起来像是你可以用自定义指令解决的问题，也许你可以用ng模型为网格指定模型。是的。。。具有各种模型的通用网格。我不想将UserCtrl函数重新写入其他页面，比如GroupCtrl。我认为自定义指令是您想要做的……但我不是100%赞成。你可以仔细阅读这篇文章，我可能会在稍后编写一个JSFIDLE，如果有人很快给出答案（或者你想出来了），那么这个JSFIDLE可能与此相关，也可能与此无关：不，实际上我不需要指令。我可以创建与UserCtrl相同的GridCtrl方法，但不知道如何将工厂对象传递给该GridCtrl。类似于在用户页面上希望将工厂对象“User”传递给ng controller=“GridCtrl”，在组页面上希望将工厂对象“group”传递给ng controller=“GridCtrl”。。。可能吗？我认为这有助于证明指令是可行的。虽然这将获得与网格相关联的适当模型，但我认为许多DOM也必须更改以适应不同的数据（例如，链接目的地、描述性文本，如“显示用户/组”等）。我也可能完全误解了这里的需要。@ExpertSystem thnx很多，这正是我想要的

/* 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'
        }
    });