javascript - angularJS:加载图像作为 ng-src 出现在 $scope 中

Question

我的 Controller 中有一个函数，可以在单击页面上的 anchor 时调用维基百科 API，从而加载有关作者的一些数据。您可以查看此数据的示例 here 。如果您在“查询”>“页面”>“id”>“缩略图”>“原始”下查看；您可以在调用此函数时看到我希望分配为 ng-src 的 url。

所以发生的情况是我的页面加载，并且图像没有显示(我猜是因为它没有 ng-src，但它也没有显示为损坏 - 它根本不存在。

当我调用我的函数并更新我想从图像调用的对象时，仍然无法加载。

有人可以指出我做错了什么吗？

我的html:

<div class="authorInfoContainer" ng-show="author">
    <button ng-click="removeAuthor()">Close window</button>
    <img ng-src="{{page.thumbnail.original}}">
    <div class="container" ng-repeat="page in author.query.pages">
        {{ page.extract }}
    </div>
</div>

我的 Controller (相关函数是 getAuthorInfo 和 removeAtuhor - 粘贴整个内容，因为我可能错过了一些东西):

'use strict';

angular.module('frontEndApp')
    .controller('WordsCtrl', function($scope, $http) {
        var url = 'http://localhost:3000/API/getWords';

        $scope.words = [];

        //custom order by function for the select drop-down
        $scope.orderByMe = function(x) {
            $scope.myOrderBy = x;
        };

        //function to get author info from wikipedia
        $scope.getAuthorInfo = function(author) {
            //remove whitespace from author
            author = author.replace(/\s/g, '+');
            //concat the get URL
            var url = 'https://en.wikipedia.org/w/api.php?action=query&format=json&uselang=user&prop=extracts%7Cpageimages&titles=' +
                author + '&piprop=name%7Coriginal';
            //get author info from wikipedia    
            $http.get(url)
                .then(function successCallback(response) {
                    $scope.author = response.data;
                }, function errorCallback(response) {
                    console.log(response);
                });
        };

        //function to clear author info
        $scope.removeAuthor = function() {
            $scope.author = null;
        };

        //function to get a random quote from the DB
        $scope.getRandomWord = function() {
            $http.get('http://localhost:3000/API/getRandomWord')
                .then(function successCallback(response) {
                    $scope.words = [];
                    $scope.words.push(response.data);
                }, function errorCallback(response) {
                    console.log(response);
                });
        };

        //get all quotes from the DB on page load
        $http.get(url)
            .then(function successCallback(response) {
                $scope.words = response.data;
            }, function errorCallback(response) {
                console.log(response);
            });
    });

Answer 1

在您的模板中，您引用了您从未设置的范围内的 page 变量。然而，您设置了一个author，正如您的ng-repeat指出的那样，它包含页面。但是，您从 ng-repeat 外部访问的page尚未定义。