Using controllerAs with $resource in AngularJs

Question

I am working on an application and I'd like to use the controllerAs syntax to not rely only on $scope. I am using $resource to get data from the API and the problem I encounter is that in the success/error callbacks I can use only $scope, since this is not defined.

Here is some code to better explain the problem.

This is my main module where among other things I configure the router:

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

In the user module I get some info about the users from the API. Here is a simplified example:

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

I'd like to be able to use 'this' in the callback of the $resource, but of course I'll get an error since 'this' is 'undefined' inside the callback. Using $scope solves the problem, but I need to refactor some code and I'd like to avoid using $scope all the time.

Any workaround? Maybe I should use a different approach?

Thanks in advance for your help and explanations!

jlowcs · Accepted Answer · 2015-03-12 20:56:47Z

2

You should look into how to use this in javascript and into javascript scopes and closures.

This should work better:

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

answered Mar 12, 2015 at 20:56

jlowcs

1,9331 gold badge11 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jlowcs Over a year ago

Please do look into it. It's amongst the basics in JavaScript. You need to understand those concepts if you want to go forward :)

Collectives™ on Stack Overflow

Using controllerAs with $resource in AngularJs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related