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;
};

Answer 2

你有一点理解它是如何工作的问题。您使用的函数就像阻塞函数一样，但它是promise。

您应该像这样使用它：

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

您还应该从loadGames函数返回值：

function loadGames() {
    // returns [$q promise][2]
    return $.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");
};

Answer 3

以下语句导致创建嵌套数组。 $ scope.games = [loadGames（）]; 请尝试这样做 $ scope.games = loadGames（）;

或尝试在loadGames函数本身设置$ scope.games值，而不是return.it将使您的生活更轻松：）

使用ng-repeat

的index.html

gameloader.js

3 个答案: