$http 服务未在控制器 angularjs 中触发成功处理程序?

$http service not triggered success handler within controller angularjs?

我正在处理 AngularJS 应用程序。在最初构建基本应用程序后,我已经转向 angular 中的路由。我已经成功实现了路由。我之前页面的数据使用 $routeParams.

进入我正在路由的页面

在我的控制器中,我使用从 $routeParams 服务收到的输入调用 $http 服务。我全部 REST API,在 chrome 的网络选项卡中,我看到响应返回,但我的 http 服务成功处理程序未 called.Tried 进行调试,但从未达到断点。

这是我的路由配置:

var app = angular.module('mainApp',['ngRoute']); 
app.config(function($routeProvider){
    $routeProvider.when('/',{
        templateUrl:"main.html",
        controller:'CategoriesController'
    }).when('/imagedetails/:imageId',{
        templateUrl: 'imagedetails.html',
        controller:'ImageDetailsController'
    })
    .otherwise({redirectTo:'/'});

});

所以我将 imageId 传递给 ImageDetailsController 以从 REST API 获取数据。

这是我的控制器:

 var ImageDetailsController = function($scope, $http, $routeParams)
    {
        $scope.imageId = $routeParams.imageId;
        console.log("Print image id : " + $scope.imageId);
        $scope.image = {};
        $scope.params = $routeParams;

         var downloadImageRequest = {
                 method: 'GET',
                 url: '<my-rest-api-url>',
                 headers: {
                   'Content-Type': 'application/json' 
                 }
        };

        $http(downloadImageRequest).then(onImageSuccess, onImageFailure);

        var onImageSuccess = function(response){ // i have put debug inside this method but never reaches controller
            console.log(response  );
            $scope.image = response.data.results[0];
        };
        var onImageFailure = function(response){
            alert("Failed to load image please try again!!");
             console.log(response);
        };
    }

在 chrome 开发人员工具的网络选项卡中,响应是可见的,但上面我设置响应的方法未触发。

请帮忙

您应该先定义您的变量,然后再使用它们。定义变量不同于定义函数。所以你可以:

    var onImageSuccess = function(response){
        console.log(response  );
        $scope.image = response.data.results[0];
    };

    var onImageFailure = function(response){
        alert("Failed to load image please try again!!");
         console.log(response);
    };

    $http(downloadImageRequest).then(onImageSuccess, onImageFailure);

或者你可以定义一个命名函数:

    $http(downloadImageRequest).then(onImageSuccess, onImageFailure);

    function onImageSuccess(response){ // i have put debug inside this method but never reaches controller
        console.log(response  );
        $scope.image = response.data.results[0];
    }

    function onImageFailure(response){
        alert("Failed to load image please try again!!");
         console.log(response);
    }