Question

这听起来很疯狂，但我有这项服务：

.factory('ListControllerService', function () {

    // Default constructor expecting a service
    return function (service) {

        // Define this
        var self = this;

        // Define our list
        self.list = [];

        // Create our page sizes array
        self.pageSizes = [10, 20, 50, 100];

        // For filtering and sorting the table
        self.pageSize = self.pageSizes[0];
        self.predicate = 'name';
        self.reverse = false;
        self.filter = '';

        // For deleting
        self.delete = function (e, model) {

            // Delete the item
            service.delete(model.id);
        };
    };
})

注入我的控制器：

.controller('DashboardController', ['ListControllerService', 'CenterService', 'companyId', 'centers', function (Controller, service, companyId, centers) {

    // Assign this to a variable
    var self = new Controller(service);

    // Assign our centers
    self.list = centers;
}])

我的路线设置如下：

$stateProvider.state('dashboard', {
    url: '/dashboard',
    templateUrl: '/assets/tpl/dashboard.html',
    controller: 'DashboardController',
    controllerAs: 'controller',
    resolve: {

        companyId: ['$rootScope', '$state', function ($rootScope, $state) {

            // Get our current user
            var user = $rootScope.user;

            // If we don't have a company id, redirect to the login screen
            if (!user.companyId) {

                // Redirect to the login page
                $state.go('/account/login');
            }

            // Return our companyId
            return user.companyId;
        }],

        // Resolve our centers before the state loads
        centers: ['$rootScope', '$state', 'CenterService', 'toastr', function ($rootScope, $state, service, toastr) {

            var centers;

            // Get our current user
            var user = $rootScope.user;

            // if we are an administrator
            if (user.role.toLowerCase() === 'administrator') {

                // Get all centers
                centers = service.all();
            } else if (user.role.toLowerCase() === 'superuser') {

                // Get the company centers
                centers = service.company(user.companyId);
            } else {

                // Get our user centers
                centers = service.user(user.id);

                // If we get our centers
                centers.then(function (response) {

                    // Count our results
                    var count = response.data.length;

                    // If we have only 1 result
                    if (count === 1) {

                        // Get our center
                        var center = response.data[0];

                        // Redirect to our collections
                        $state.go('collections', { centerId: center.id });
                    }

                // If there is an error
                }, function () {

                    // Tell the user there was an error
                    toastr.error('Failed to retrieve your center(s).');
                });
            }

            // Return our centers
            return centers;
        }]
    },
    data: {
        requireLogin: true,
        pageTitle: 'Dashboard'
    }
})

正如您所看到的，我设置了 controllerAs 属性，所以我希望在我的视图中我可以像这样对列表执行ng-repeat：

<tr ng-repeat="center in controller.list.data">
    <td>
        {{ center.name }}
    </td>
</tr>

但没有任何反应。如果我将控制器更改为：

.controller('DashboardController', ['ListControllerService', 'CenterService', 'companyId', 'centers', function (Controller, service, companyId, centers) {

    // Assign this to a variable
    var self = this;

    // Assign our centers
    self.list = centers;
}])

它工作正常。有人可以告诉我为什么吗？

Answer 1

controllerAs表示控制器实例在“别名”下的范围内发布，因此，在您的情况下，$scope["controller"]下的"controller"是this别名。

控制器实例由控制器函数内的.controller("DashboardController", function(){ this.foo = "foo"; var self = this; // now self also references the controller instance self.bar = "bar"; });引用：

<div ng-controller="DashboardController as controller">
  <div>{{controller.foo}} will be "foo"</div>
  <div>{{controller.bar}} will be "bar"</div>
</div>

然后，您可以在HTML中获取实例的属性：

self

这就是你在第二种情况下所做的。

在第一种情况下，.list引用其他内容，但不控制器实例，因此您没有undefined作为控制器实例的属性，因此在这个表达式中<tr ng-repeat="center in controller.list.data">：

AngularJs ControllerAs没有像我预期的那样工作

1 个答案: