触发$ HTTP功能时，AngularJS进入无限循环

Question

我的应用程序在发射$ http get get get a函数

时进入无限循环

在我的控制器中，我正在使用帖子并在授权后从API中获取数据。

var app = angular.module('myApp', []);
app.controller('ctrl1', function($scope, $http) {
   $http({
         url: 'url',
         method: "POST",
         data: 'postData',
         headers: {
            'Authorization': 'value'
         }
      })
      .then(function(response) {
         $scope.hotels = response.data;
      });
   $scope.imagePath = function(id) {
      console.info(id);
      if (id) {
         $http({
               method: 'GET',
               url: 'url=' + id
            })
            .then(function(response) {
               var imgdata = response.data;
               console.info(imgdata);
               var imgdata1 = imgdata.data.image_name;
               return "url" + imgdata1;
            });

      }
   };
});

在我的img ng-src中，我必须从钥匙外部_image的另一个API调用我传递的功能中的数据，但它进入了无限循环。我也知道我必须在imgdata1中使用Angular foreach。

<div ng-controller='ctrl1'>
   <select ng-options='item as item.hotel_name for item in hotels.data' ng-model='hotel'></select>
   <h1>{{hotel.hotel_name}}</h1>
   <p>{{hotel.hotel_description}}</p>
   <img ng-src="{{imagePath(hotel.exterior_image)}}">
</div>

Answer 1

在控制器中尝试一下：

var app = angular.module('myApp', []);
app.controller('ctrl1', function ($scope, $http) {
     $scope.current_Hotel = {
        hotel_name: "Default Value Here",
        hotel_description: "Default Value Here",
        exterior_image: "Default id here",
        image_url: "Default url here"
    };
    $http({
        url: 'url',
        method: "POST",
        data: 'postData',
        headers: {
            'Authorization': 'value'
        }
    }).then(function (response) {
                $scope.hotels = response.data;
            });       
    $scope.selectHotel = function () {
        $http({
            method: 'GET',
            url: 'url=' + $scope.current_Hotel.exterior_image
        }).then(function (response) {
                    var imgdata = response.data;
                    var imgdata1 = imgdata.data.image_name;
                    $scope.current_Hotel.image_url = "url" + imgdata1;
                });
    };

});

和此：

<div ng-controller='ctrl1'>
    <select ng-options='item as item.hotel_name for item in hotels.data' ng-model='current_Hotel'></select>       
    <h1>{{current_Hotel.hotel_name}}</h1>
    <p>{{current_Hotel.hotel_description}}</p>
     <img ng-src="{{current_Hotel.image_url}}">
</div>