ui-router views cannot find method in controller

Question

I have this ui-router and it works fine it redirect me to bubblesettings page.

 .state('bubblesettings', {
        url: '/bubble/:bubbleId/settings',

        data: {
            authorizedRoles: [USER_ROLES.editor]
        },
        views: {
            'navigation': {
                templateUrl: "/js/shared/partials/navigation.html"
            },
            'main': {
                templateUrl: "/js/shared/partials/bubbles/bubble-settings.html"

            }
        }
    })

In that controller i want to do a call to a service to get bubble users.

(function () {
    'use strict';

    angular
        .module('raqtApp')
        .controller('BubblesSettingsController', BubblesSettingsController);

    BubblesSettingsController.$inject = ['$scope', '$rootScope', '$stateParams', 'BubblesService', '$state'];

    function BubblesSettingsController($scope, BubblesService, $rootScope, $stateParams, $state) {

        $scope.bubbleId = $state.params.bubbleId;

        $scope.getMembersInBubble = function (bubbleId) {
            BubblesService.getBubbleUsers(bubbleId)
                .then(function (data) {
                    $scope.bubbleUsers = data;
                    console.log('Sucesss');
                },
                function (data) {
                    console.log('Fail..');
                })

        };
    }
})();

When i call my function getMembersInBubble i get

TypeError: BubblesService.getBubbleUsers is not a function
    at Scope.BubblesSettingsController.$scope.getMembersInBubble (http://localhost:3604/js/bubbles/settings/bubble-settings-controller.js:20:28)
    at fn (eval at <anonymous> (https://code.angularjs.org/1.4.0-rc.1/angular.js:12931:15), <anonymous>:2:350)
    at ngEventDirectives.(anonymous function).compile.element.on.callback (https://code.angularjs.org/1.4.0-rc.1/angular.js:22919:17)
    at Scope.$get.Scope.$eval (https://code.angularjs.org/1.4.0-rc.1/angular.js:15574:28)
    at Scope.$get.Scope.$apply (https://code.angularjs.org/1.4.0-rc.1/angular.js:15673:23)
    at HTMLButtonElement.<anonymous> (https://code.angularjs.org/1.4.0-rc.1/angular.js:22924:23)
    at HTMLButtonElement.jQuery.event.dispatch (http://localhost:3604/js/lib/jquery/jquery.js:4435:9)
    at HTMLButtonElement.jQuery.event.add.elemData.handle (http://localhost:3604/js/lib/jquery/jquery.js:4121:28)

This is my service

   this.getBubbleUsers = function (bubbleId) {

    var deferred = $q.defer();
    $http(
        {
            method: 'get',
            url: baseUrl + "/api/bubble/" + bubbleId + "/users",
            headers: { "Authorization":      RaqtGlobal.getAuthToken().Authorization }
        }).success(function (data) {
            deferred.resolve(data);
        }).error(function () {
            deferred.reject();
        });

    return deferred.promise;
};

I can see that my bubble-service.js is loaded on page but i cannot find out why i cannot access that method - why it say its not a function??

Is it something that it is loaded inside a view from ut-router i cannot call it??

We also need the service definition; you are just showing us the getBubbleUsers call; not the definition of the service. — George Stocker
– George Stocker, Commented May 7, 2015 at 19:29
@GeorgeStocker it was not related to service, it was related to injection..look at mine answer — Pankaj Parkar
– Pankaj Parkar, Commented May 7, 2015 at 19:35

Pankaj Parkar · Accepted Answer · 2015-05-07 19:36:24Z

4

As you are injected your BubblesService to forth parameter so in function it should be in 4th place,

Controller

(function() {
    'use strict';

    angular
        .module('raqtApp')
        .controller('BubblesSettingsController', BubblesSettingsController);

    BubblesSettingsController.$inject = ['$scope', '$rootScope', '$stateParams', 'BubblesService', '$state'];

    function BubblesSettingsController($scope, $rootScope, $stateParams, BubblesService, $state) {

        //..your code..//
    }
})();

edited May 7, 2015 at 19:36

answered May 7, 2015 at 19:31

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

12 Comments

MrWeiland Over a year ago

TY!!! I have been on this problem for hours!! :) I did not now that you need same order when i didBubblesSettingsController.$inject = ['$scope', 'BubblesService', '$rootScope', '$stateParams', '$state']; I thought it only was when i injected on controller the other way - i love you right now - seems to work! :)

Pankaj Parkar Over a year ago

@Glad to help you, Thanks :)

Pankaj Parkar Over a year ago

@MrWeiland Its like you are injecting objecting and creating new instance of that object in same order in which they are injected

George Stocker Over a year ago

@pankajparkar Yes; the plunkr shows array annotation as well; it's just inline with the declaration, not separate.

MrWeiland Over a year ago

Sorry im rather new to stackoverflow! Done.. :)

|

Collectives™ on Stack Overflow

ui-router views cannot find method in controller

1 Answer 1

12 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Related