Question

我有这个ui-router，它工作正常，它将我重定向到bubblesettings页面。

 .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"

            }
        }
    })

在该控制器中，我想调用服务来获取泡泡用户。

(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..');
                })

        };
    }
})();

当我调用我的函数getMembersInBubble时，我得到了

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

我可以看到我的bubble-service.js已加载到页面上，但我无法找到为什么我无法访问该方法 - 为什么它说它不是函数？

它是从ut-router加载到视图中的东西吗？我无法调用它？

Answer 1

当你将BubblesService注入第四个参数时，它应该在第四位，

<强>控制器

(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..//
    }
})();

ui-router视图无法在控制器

1 个答案: