[英]AngularJS Dependency injection in controller of routeProvider resolve
注入resolve
的返回對象,該對象應該注入控制器中,但不是。 我正在使用Promise,以便控制器不會實例化直到Promise被解決,因為我正在使用$http
服務執行HTTP POST。
我還通過使用$location.path
根據響應數據進行一些重定向。 第一條路由將使用其獲取的數據重定向到template1
路由。
$routeProvider
.when("/auth/:id", amd.route(
{
controller: 'eventController',
controllerUrl: 'app/controllers/eventController',
resolve: {
returnedData: ['$http', '$location', '$route', '$q', function ($http, $location, $route, $q) {
var id = $route.current.params.id;
var defer = $q.defer();
$http({
method: 'POST',
url: 'http://domain/service/webapi',
data: { 'name': id }
}).then(function (response) {
var template = "/template".concat(response.data.displayLayout);
defer.resolve(response.data);
$location.path(template);
return defer.promise;
});
}]
}
}))
.when("/template1", amd.route(
{
templateUrl: 'views/templates/template1.html',
controller: 'eventController',
controllerUrl: 'app/controllers/eventController',
}));
app.controller('eventController', ['$scope', '$routeParams', '$timeout', 'returnedData',
function ($scope, $routeParams, $timeout, returnedData) {
// ...controller code here: $scope.returnedData = returnedData
});
我收到AngularJS錯誤:
錯誤:$ injector:unpr未知提供程序
有什么想法嗎?
在AngularJS API頁面中,關於routeProvider( https://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider)
您可以看到:
resolve-{Object。=} ...如果承諾中有任何依賴項,則路由器將在實例化控制器之前等待它們全部解決或拒絕所有依賴項
您應該像下面那樣編輯代碼:
var id = $route.current.params.id;
var defer = $q.defer();
$http({
method: 'POST',
url: 'http://domain/service/webapi',
data: { 'name': id }
}).then(function (response) {
var template = "/template".concat(response.data.displayLayout);
defer.resolve(response.data);
$location.path(template);
});
// return the promise outside `then` method, then angularjs will wait it `resolve`
return defer.promise;
此外,請注意以下幾點:
請注意,ngRoute。$ routeParams仍將引用這些解析函數中的上一條路由。 使用$ route.current.params來訪問新的路由參數。
將依賴注入與ng-route結合使用,我的解決方案是:
var myApp = angular.module("myApp", ["ngRoute", "localytics.directives"]);
myApp.config(['$routeProvider',function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "//TimeLine.html",
controller: "MainCtrl"
})
.when("/AddOrEditOccasion", {
templateUrl: "/Html/GiftWhiz/AddOrEditOccasion.html",
controller: "AddOrEditOccasionCtrl"
})
.when("/OccasionStart", {
templateUrl: "/OccasionStart.html",
controller: "OccasionStartCtrl"
})
}]);
myApp.controller("MainCtrl", ['$scope', '$http', '$location', function ($scope, $http, $location) {
//your codes
}]);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.