angularjs - オブジェクトの配列による ng-repeat

Question

angular JSとStamPlayで小さなシャウトボックスを作成しています。そのため、 URL経由でアクセスできる「テスト シャウト」をいくつか作成しました。

私のAngularアプリでは、データを取得するサービスを作成しました:

app.factory('shouts', ['$http', function ($http) {

    return $http.get('https://shoutbox.stamplayapp.com/api/cobject/v1/shouts').success(function (data) {
        return data.data;
    });

}]);

MainController 内で、データを $scope にアタッチします。

app.controller('HomeController', [
    '$scope',
    'shouts',

    function ($scope, shouts) {
        $scope.shouts = shouts;
    }

]);

しかし、データ [] を ng-repeat しようとすると、内部のオブジェクトにアクセスできません。何が問題なのかわかりません。

<div ng-repeat="shout in shouts">
  {{shout.title}}
</div>

Answer 1

あなたが「data.dataを返す」ことをしても、叫ぶことは$約束です。したがって、約束が解決されたら $scope.shouts を割り当てる必要があります。

app.factory('shouts', ['$http', function ($http) {

    return $http.get('https://shoutbox.stamplayapp.com/api/cobject/v1/shouts');

}]);

app.controller('HomeController', [
    '$scope',
    'shouts',

    function ($scope, shouts) {
       shouts.then(function(data) { $scope.shouts = data.data});
    }

]);

別のオプションは、ルート構成の叫びを解決し、それをコントローラーに注入することです

$routeProvider
.when("/home", {
    templateUrl: "home.html",
    controller: "HomeController",
    resolve: {
        shout_data: shouts
    }


app.controller('HomeController', [
    '$scope',
    'shout_data',

    function ($scope, shout_data) {
       $scope.shouts = shout_data;
    }

]);