Question

我在阅读mocking server dependancies in JS and AngularJS apps之后，正在我的小型AngularJS应用程序中重构我的主控制器。

在我的标记中，我迭代了＃34;主要事件＆＃34;使用ng-repeat指令：

这是我的AngularJS模块，重构的存储库和控制器。

但是我无法以这种方式访问主事件数组 - 我缺少什么？

// Module
var app = angular.module('MainEventApp', ['cloudinary']);

// Repository
app.service('MainEventRepository', ['$http', function($http) {

    this.$http = $http;

    this.getMainEvents = function() {

        return [
        {
            id: 1,
            roman_numeral: 'I',
            name: 'Hulk Hogan & Mr T vs Rowdy Roddy Piper & Paul Orndorff',
            venue: 'Madison Square Garden',
            state: 'New York',
            attendance: 19121
        },
        {
            id: 2,
            roman_numeral: 'II',
            name: 'Hulk Hogan vs King Kong Bundy',
            venue: 'Split-Transmission',
            state: 'New York/Illinois/California',
            attendance: 40085
        }
        ];
  };

}]);

// Controller
app.controller("MainEventCtrl", ['$scope', 'MainEventRepository', function ($scope, MainEventRepository) {

    MainEventRepository.getMainEvents().then(function(main_events) {
        //$scope.main_events = main_events;
        return main_events;
    });    

}]);

我可以看到我的实时应用程序here（尚未重构）。

Answer 1

首先，要在标记中使用main_events，您需要在控制器范围内拥有此属性。

其次，您的服务返回简单数组，但在您的控制器中，您使用它就好像它会返回promise。

所以，你的控制器代码应该是这样的东西：

app.controller("MainEventCtrl", ['$scope', 'MainEventRepository', function ($scope, MainEventRepository) {

    $scope.main_events = MainEventRepository.getMainEvents();

}]);

你的标记：

<li ng-repeat="event in main_events"></li>

Answer 2

您必须将main_events添加到您的范围。

MainEventRepository.getMainEvents().then(function(main_events) {
    //$scope.main_events = main_events;
    return main_events;
});

为什么该承诺的第一行被注释掉了？

使用AngularJS中的ng-repeat调用并迭代函数返回值

2 个答案: