AngularJS ng-src異步函數

Question

我正在創建一個簡單的web應用程序來顯示公式1驅動程序。驅動程序列表通過公共API檢索。我有一個鏈接到他們的維基百科頁面，所以我試圖獲取主要圖像用作配置文件圖片。

我從url中提取維基百科頁面標題，然後執行進一步的JSON調用以獲取圖像的url。

獲取驅動程序列表並綁定到頁面可以正常工作，但我的函數調用似乎永遠不會填充ng-src屬性，即使觸發了JSON調用。控制檯日誌記錄顯示img url已返回，但它永遠不會填充img。

以下是我controller.js

angular.module('formulaOneApp.controllers', []).controller('DriverViewController', function($scope, $stateParams, Driver) { 
    $scope.data = Driver.driver.get({ id: $stateParams.id }, function(){ 
    $scope.driver = $scope.data.Drivers[0]; 
    }); 

    $scope.getProfilePic = function(driverName) { 
    if (driverName == undefined) return; 
    console.log(driverName) 

    $.getJSON("http://en.wikipedia.org/w/api.php?callback=?", 
    { 
     action: "query", 
     titles: driverName, 
     prop: "pageimages", 
     format: "json", 
     pithumbsize: "200" 
    }, function(data) { 
     $.each(data.query.pages, function(i,item){ 
      console.log(item.thumbnail.source) 
      return item.thumbnail.source; 
     }); 
    }); 
    } 
}); 

這是我的html： -

<h3>Details for {{driver.givenName}} {{driver.familyName}}</h3> 
<img ng-src="{{ getProfilePic(driver.wikiName) }}" /> 

我懷疑這可能不是正確的方法，所以任何人都可以點我在正確的方向？

Answer 1

getProfilePic(...)的實現檢索數據，但實際上並沒有在任何地方保存源路徑。爲了正確處理此問題，您不會將數據檢索調用放入ng-src屬性中（因爲它將在每個$digest上重複執行）。相反，您可以直接從您的控制器執行檢索調用

$scope.data = Driver.driver.get({ id: $stateParams.id }, function(){ 
    $scope.driver = $scope.data.Drivers[0]; 
    $scope.getProfilePic($scope.driver.wikiName).then(function (url) { 
     $scope.driver.imageUrl = url; 
    }); 
}); 

$scope.getProfilePic = function(driverName) { 
    return $http.get("http://en.wikipedia.org/w/api.php?callback=?", { ... }, function (data) { 
     // ... get the image URL from the data and return it 
    }); 
}); 

並保存您獲得的範圍變量的URL。然後，只需連接到該變量從您的模板：

<img ng-src="{{driver.imageUrl}}"> 

（我只用$http.get代替$.getJSON，因爲我不使用jQuery隨意調整該位，但要記住的是，jQuery的AJAX方法不返回AngularJS承諾）

---

和一個免費的獎金提示：是否使用jQuery承諾或AngularJS promises，瞭解他們是如何鏈接。在AngularJS中，控制器代碼乾淨的版本是這樣的：

getDriver($stateParams.id) 
    .then(function (driver) { 
     $scope.driver = driver; 
    }) 
    .then(function() { 
     return getDriverImageUrl($scope.driver.wikiName); 
    }) 
    .then(function (url) { 
     $scope.data.imageUrl = url; 
    }); 

function getDriver (id) { 
    return $http({ 
     // ... 
    }); 
} 
function getDriverImageUrl (driverName) { 
    return $http({ 
     // ... 
    }); 
}