javascript - 使用 ng-repeat 加载图像

Question

我是 Angular.js 的新手，我正在尝试使用 ng-repeat 和 ng-scope 从 txt 文件加载名称和图像列表。然而;从 txt 文件加载后，似乎无法读取数组。我不确定它为什么这样做，因为根据我的研究，ng-scope 可以从以下对象加载:

app.controller("gameLoadCtrl",function($scope) {
    $scope.games = [{
        name: "Habbo Hotel"
        icon: "someimage.jpg"
    }];
});

但不会以我尝试格式化游戏列表的方式加载，我确信它仍然是完全相同的格式。

index.html

以下只是带有 ng-repeat 的 html 代码。目前无法加载图像，因为我仍在尝试仅加载名称。

    <div class="main-container container" ng-app="myApp" ng-controller="gameLoadCtrl">
        <span class="game-card col-lg-2 col-sm-4 col-xs-6" ng-repeat="game in games">
        {{game.name}}</span>
    </div> 

gameloader.js

以下是我认为造成问题的原因，一旦从 loadGames() 返回列表，$scope.games 将更新，但会显示空白结果。

var app = angular.module("myApp", []);

app.controller("gameLoadCtrl",function($scope) {
    $scope.games = [loadGames()];
});

// Load games and icon dir from txt file
function loadGames() {
    $.get("files/gameslist.txt", function (data, status) {
        // Split at unique seperator
        var gamesWithPicsList = data.split("<(O_O)>");
        var games = [];
        for (i=0; i < gamesWithPicsList.length-1; i++) {
            // Split game name and icon dir at seperator
            var gameAndPic = gamesWithPicsList[i].split(",");
            var game = "";
            var pic = "";
            // Slice off line break for all games listed apart from first
            if (i>0) {
                game = gameAndPic[0].slice(2);
            } else {
                game = gameAndPic[0];
            }
            pic = gameAndPic[1];
            // Add new game object to array
            games.push({
                name: game,
                icon: pic
            });
        }
        return games;
    }, "text");
};

问题肯定出在 loadGames() 以及我似乎将其插入游戏数组的方式中，但我不明白为什么 $scope 不接受它。

Answer 1

您将永远无法按照您定义的方式加载游戏。

loadGames() 在您的情况下是一个异步方法。

因此，您必须在 $scope 中定义 $.get。

并且不要调用方法loadGames。

所以不要这样做:

$scope.games = [loadGames()];

这样做:

var app = angular.module("myApp", []);

app.controller("gameLoadCtrl",function($scope) {
    $scope.games = generateGamesList();
});

function generateGamesList() {
    var games=[];
    var fileUrl = "files/gameslist.txt";
    $.ajax({
        url: fileUrl,
        type: "get",
        dataType: "text",
        async: false,
        success: function (data) {
            // Split at unique seperator
            var gamesWithPicsList = data.split("<(O_O)>");
            for (i=0; i < gamesWithPicsList.length-1; i++) {
                // Split game name and icon dir at seperator
                var gameAndPic = gamesWithPicsList[i].split(",");
                var game = "";
                var pic = "";
                // Slice off line break for all games listed apart from first
                if (i>0) {
                    game = gameAndPic[0].slice(2);
                } else {
                    game = gameAndPic[0];
                }
                pic = gameAndPic[1];
                // Add new game object to array
                games.push({
                    name: game,
                    icon: pic
                });
            }
            alert(games);
        }
    });
    return games;
};