javascriptruby-on-railsangularjsangularjs-resource

Cannot read property 'index' of undefined


I am very new to Angular and was trying to use it on my Rails Application. But I got the following error.

TypeError: Cannot read property 'index' of undefined

app.js code

angular.module('ticket', ['ngResource', 'ui.router', 'templates'])
.controller('AppCtrl', ['$rootScope', function($rootScope) {
    var _this = this;
    return $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
        return $rootScope.pageTitle = $route.current.title;
    });
}])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'home/_home.html',
            controller: 'MainCtrl'
        })
        .state('members', {
            url: '/members',
            templateUrl: 'members/_members.html',
            controller: 'MemberCtrl'
        })
        .state('guards', {
            url: '/guards',
            templateUrl: 'guards/_guards.html',
            controller: 'GuardCtrl'
        })
        .state('tickets', {
            url: '/tickets',
            templateUrl: 'tickets/_tickets.html',
            controller: 'TicketCtrl'
        });
    $urlRouterProvider.otherwise('home')
}]);

memberCtrl.js code (inside members directory)

angular.module('ticket')
.factory('Member', ['$resource', function($resource) {
    return $resource("/members/:id", {id: "@id"}, {
        get: { method: 'GET'},
        save: { method: 'POST'},
        index: { method: 'GET', isArray: true},
        remove: { method: 'DELETE'},
        "delete": { method: 'DELETE'},
        update: { method: 'PUT'}
    });
}])
.controller('MemberCtrl', ['$scope', function($scope, Member) {
    console.log(Member.index());
    $scope.members = Member.index();
}]);

Solution

  • You need to inject dependency Member in the controller properly.

    .controller('MemberCtrl', ['$scope', 'Member', function($scope, Member) {
                                        //^^^^^^^^^^
    

    instead of

    .controller('MemberCtrl', ['$scope', function($scope, Member) {