Question

我正在处理一个应用程序，我想将controllerAs语法用于not rely only on $scope。我使用$ resource从API获取数据，我遇到的问题是在成功/错误回调中我只能使用$ scope，因为这没有定义。

以下是一些可以更好地解释问题的代码。

这是我的主要模块，其中包括我配置路由器：

angular
    .module('app', ['ngRoute', 'ngResource', 'LocalStorageModule', 'app.users', 'app.auth'])
    .config(configure)
    .controller('MainController', ['$scope', '$location', MainController]);

function configure($routeProvider, localStorageServiceProvider, $resourceProvider) {
    // configure the router
    $routeProvider
        .when('/', {
            templateUrl: 'app/homepage.html',
            controller: 'MainController',
            controllerAs: 'vm',
            data: { authRequired: true }
        })
        .when('/users', {
            templateUrl: 'app/users/main.html',
            controller: 'UserController',
            controllerAs: 'vmu',
            data: { authRequired: true }
        })
        .otherwise({redirectTo: '/'});
}
// the MainController is not relevant here

在用户模块中，我从API获得有关用户的一些信息。这是一个简化的例子：

angular
    .module('app.users', ['ngResource'])
    .controller('UserController', ['UserService', UserController])
    .factory('UserService', ['$resource', UserService]);

function UserController(UserService) {
    this.users = UserService.users.list();

    this.getUserInfo = function(userId) {
         this.user = UserService.users.single({ id: userId },
             function(success) {
                 // here I'd like to use 'this' but the following line will trigger an error
                 this.groupRules = UserService.users.rules({ id: success.userGroupId });
                 // I have to use $scope instead but it is not what I want
                 // $scope.groupRules = UserService.users.rules({ id: success.userGroupId });
             } );
    }
}

function UserService($resource) {

    var userResource = {};

    userResource.users = $resource('https://my.api.com/users/:action',
        {},
        {
            list: { method: 'GET', isArray: true, params: { action: 'list' } }
            single: { method: 'GET', params: { action: 'single', id: '@id' } }
            rules: { method: 'GET', params: { action: 'getRules', id: '@id' } }
        });

    return userResource;
}

我希望能够使用＆＃39;这个＆＃39;在$资源的回调中，当然我会收到错误，因为这个＆＃39;是不确定的＆＃39;在回调中。使用$ scope解决了这个问题，但我需要重构一些代码，并且我希望一直避免使用$ scope。

任何解决方法？也许我应该使用不同的方法？

提前感谢您的帮助和解释！

Answer 1

你应该研究如何在javascript和javascript范围和闭包中使用this。

这应该更好：

function UserController(UserService) {
    var _this = this;

    this.users = UserService.users.list();

    this.getUserInfo = function(userId) {
         _this.user = UserService.users.single({ id: userId },
             function(success) {
                 // here I'd like to use 'this' but the following line will trigger an error
                 _this.groupRules = UserService.users.rules({ id: success.userGroupId });
             } );
    }
}

在AngularJs中使用带有$ resource的controllerAs

1 个答案: