美元的范围。变量在从$http检索数据之前执行

I am trying to assign a variable -> value retrieved from my $http request. But the code used for the variable executes first rather than waiting for the http request even after using promise.

我正在尝试分配从$http请求中检索到的变量->值。但是，用于变量的代码首先执行，而不是在使用promise之后等待http请求。

I am new to angular however I thought 'promise' should take care of this. Kindly suggest !

我是新手，但我认为“承诺”应该解决这个问题。请建议!

.controller('Gym_DetailsController', function($scope, $http, $state, $timeout, providerdetailservice, $location, $ionicScrollDelegate, $window, $rootScope, $q) {

    $rootScope.providerid = $state.params.UPNO;
    $scope.whichProv = $state.params.UPNO;


    var one = providerdetailservice.getdetails($scope.whichProv);
    $q.all([one]).then(function(arr) {
            $scope.providerinfo = arr;
            console.log(arr[0].data[0].AREA);
            $scope.image = arr[0].data[0].ProvImage;
            console.log($scope.image); * * // This gives output as my required answer but SECOND --> Executed Second**
        },
        function(err) {

        }
    ).
    finally(
        function() {
            //Nothing
        })
    console.log($scope.image); * * // This gives output as undefined FIRST --> Executed first**
    $scope.items = [{
        src: $scope.image,
        sub: 'This is a <b>subtitle</b>'
    }]
})

3 个解决方案

#1

your 2nd console.log() runs first because it's not inside of your promise.

log()首先运行，因为它不在您的承诺之内。

Where you are doing

你在哪里做

$scope.items = [{
   src: $scope.image,
   sub: 'This is a <b>subtitle</b>'
}];

$scope.image won't be available yet because the promise hasn't been fulfilled yet. Move this code into the promise and it should work fine.

美元的范围。因为这个承诺还没有实现，所以目前还无法获得图像。将此代码移动到承诺中，它应该可以正常工作。

var one = providerdetailservice.getdetails($scope.whichProv);    
$q.all([one]).then(function(arr){
    $scope.providerinfo = arr;
    console.log(arr[0].data[0].AREA);
    $scope.image = arr[0].data[0].ProvImage;
    console.log($scope.image);

    //now try and access $scope.image
    $scope.items = [{
        src: $scope.image,
       sub: 'This is a <b>subtitle</b>'
    }];
}, function(err){}
).finally(function(){ //Nothing });

#2

This is what I do and it works great.

这就是我所做的，而且效果很好。

Service.getData("param1", $scope.otherParam).then(
    function(data){
        console.log(data.data); //hey there it is... :)
        $scope.someOtherfunctionCallback(data.data);
    }
).finally(function(){ console.log("finally done with that crap..."); });

My service:

我的服务:

angular.module('app')
  .factory('Service',['$http','$q',function($http, $q){
var service={};
var getReportMenu = function(){
        //console.log("getting menu...");
        var defer = $q.defer();
            $http({
                method:'GET',               
                url:'http://localhost:8080/API/PATH',               
                cache:true,
                dataType:'json'})
            .then(
                function successCallback(response){
                    defer.resolve(response);
                },

                function errorCallback(response){
                    //TODO: handle this elegantly later.
                    alert("Error!");
                });
            return defer.promise;
        }

return { getReportMenu : getReportMenu }; //Just easy encapsulation.

}
});

#3

$q.all([one]).then(function(arr) {
            $scope.providerinfo = arr;
            console.log(arr[0].data[0].AREA);
            $scope.image = arr[0].data[0].ProvImage;
            $scope.items = [{
             src: $scope.image,
             sub: 'This is a <b>subtitle</b>'
            }]
            console.log($scope.image); * * // This gives output as my required answer but SECOND --> Executed Second**
        },
        function(err) {

        }
    ).
    finally(
        function() {
            //Nothing
        })
    console.log($scope.image); * * // This gives output as undefined FIRST --> Executed first**
    $scope.items = [{
        src: $scope.image,
        sub: 'This is a <b>subtitle</b>'
    }]

#1