javascript - AngularJS ng-src 异步函数

Question

我正在创建一个简单的网络应用程序来展示一级方程式车手。驱动程序列表通过公共(public) API 检索。我有一个指向他们的维基百科页面的链接，所以我正在尝试获取主要图像以用作个人资料图片。

我从 url 中提取维基百科页面标题，然后对维基百科执行进一步的 JSON 调用以获取图像的 url。

获取驱动程序列表并绑定(bind)到页面工作正常，但我的函数调用似乎从未填充 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 上重复执行)。相反，您会直接从您的 Controller 进行检索调用

$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 promise 。)

---

还有一个免费的奖励提示:无论是使用 jQuery promises 还是 AngularJS promises ，了解它们是如何链接的。在 AngularJS 中，您的 Controller 代码的干净版本如下所示:

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({
        // ...
    });
}