AngularJS Dependency 注入在 routeProvider 解析的控制器中

AngularJS Dependency injection in controller of routeProvider resolve

本文关键字：控制器 routeProvider Dependency 注入 AngularJS      更新时间：2023-09-26

注入应该注入控制器的resolve的返回对象，但事实并非如此。我正在使用一个承诺，以便在解决承诺之前控制器不会实例化，因为我正在使用$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）

你可以看到：

解析 - {对象.=} ...如果这些依赖项中的任何一个是承诺，则路由器将等待它们全部解析或拒绝一个，然后再实例化控制器

您应该像下面这样编辑代码：

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
}]);
相关文章：