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

您是否忘记将控制器附加到 HTML 中？

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

更多关于ngController的信息：https://docs.angularjs.org/api/ng/directive/ngController

Answer 2

即使你“返回 data.data”，shouts 也是一个 $promise。所以你需要在 promise 解决时分配 $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;
    }

]);