ui-路由器视图在控制器中找不到方法
ui-router views cannot find method in controller
我有这个 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 的视图中加载的东西我不能调用它??
因为你被注入你的 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,它工作正常,它将我重定向到 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 的视图中加载的东西我不能调用它??
因为你被注入你的 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..//
}
})();