Question

我的控制器中有一个函数，它在点击我页面上的一个锚点时调用Wikipedia API，它会加载一些关于作者的数据。您可以看到此数据here的示例。如果您在“查询”下查看＆gt;页面＆gt; id＆gt;缩略图＆gt;原版的;你可以在调用这个函数时看到我想要指定为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>

我的控制器（相关函数是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指出的那样，它包含页面。但是，您从page外部访问的ng-repeat未定义。

Answer 2

我认为您的示例中缺少数据。什么是$scope.page？由于您使用的是{{page.thumbnail.original}}

angularJS：加载图像为ng-src出现在$ scope

2 个答案: