在 ng-view 中使用 ng-repeat答案

【问题标题】：Using ng-repeat inside ng-view在 ng-view 中使用 ng-repeat
【发布时间】：2015-11-07 02:45:38
【问题描述】：

我正在尝试在 ng-view 中使用 ng-repeat，但它没有提取数据。我在论坛上读到我可以使用工厂，但我认为使用服务是不可接受的，因为我的 $scope 的数据使用 $routeParams 来查询其数据。

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(['$routeProvider',
function($routeProvider) {
    $routeProvider.
        when('/:name', {
            templateUrl: 'welcome.html',
            controller: 'myController'
        }).
        otherwise ({
        redirectTo: '/'
    });
}]);


myApp.controller('myController', ['$scope', '$routeParams', '$q', function($scope, $routeParams, $q) {
    var pls = users($q, $routeParams.name);
    $scope.sBP = pls;
}]);

function users($q, name) {
var playersDFD = $q.defer();
var players = new Array();
var GameScore = Parse.Object.extend("GameScore");
var query = new Parse.Query(GameScore);
query.equalTo("playerName", name);
query.find({
    success: function (results) {
        for (var i in results) {
            sPlayer = new player(results[i].get("playerName"), results[i].get("score"), results[i].get("cheatMode"));
            players.push(sPlayer);
        }
        playersDFD.resolve(players);
    },
    error: function (error) {
        alert('error');
        playersDFD.reject(data);
    }
});

return playersDFD.promise
    .then(function (results) {
        return results;
    })
    .catch(function (error) {
        alert(error.message);
    });
};

function player(name, score, cheatm){
    this.name = name;
    this.score = score;
    this.cheatm = cheatm; 
};

还有观点：

<p ng-repeat="s in sBP">
    {{ s.name }}
</p>

【问题讨论】：

我会检查 pls 实际上是数据而不是 promise。您需要展示 users 函数正在做什么，因为它在您的示例中似乎是全局的。
所以，你对 $scope 做了一个承诺... Promise 不是一个数组，它是 {then: function(){}} 对象
这可能会有所帮助：github.com/angular/angular.js/issues/3196
问题在于承诺。就像你提到的那样，我将承诺用作变量。我把函数改成：users($q, $routeParams.name).then(function(results) { $scope.sBP = results; });

标签： javascript angularjs ng-repeat angular-routing ng-view

【解决方案1】：

让你的 users 函数返回承诺而不是试图解决它，这最终得到的代码更容易遵循，并且将让 user 函数的使用者控制你收到后要做什么一个答复。例如。

function users($q, name) {
    var playersDFD = $q.defer();
    var players = new Array();
    var GameScore = Parse.Object.extend("GameScore");
    var query = new Parse.Query(GameScore);
    query.equalTo("playerName", name);
    query.find({
        success: function (results) {
            for (var i in results) {
                sPlayer = new player(results[i].get("playerName"), results[i].get("score"), results[i].get("cheatMode"));
                players.push(sPlayer);
            }
            playersDFD.resolve(players);
        },
        error: function (error) {
            alert('error');
            playersDFD.reject(data);
        }
    });

    return playersDFD.promise;
}

然后使用users函数并自己处理then。

users($q, $routeParams.name).then(function (response) {
    $scope.sBP = response;
}, function (error) {
    // handle error.
});

另外，我建议将users 拆分为自己的service 以注入$q，而不是将其传递进去。

希望对您有所帮助。

【讨论】：