在angularjs app中加载初始数据

时间:2013-09-11 17:57:42

标签: javascript jquery angularjs

我目前正在尝试开发AngularJS应用。这是我使用AngularJS的第一个应用程序,我想我很清楚它是如何工作的,因为我多年来一直是Silverlight开发人员: - )

然而,有一个简单的事情我无法弄清楚:如何在应用启动时获取应用的初始数据。

我需要的是一个简单的数据表,其中一些字段可以内联编辑(通过下拉列表)我的应用程序结构是这样的:

app.js

var app = angular.module('feedbackApp', []);

feedbackService.js

app.service('feedbackService', function ($http) {
this.getFeedbackPaged = function (nodeId, pageNumber, take) {
    $http.get('myUrl', function (response) {
        return response;
    });
};
});

feedbackController.js

app.controller('feedbackController', function ($scope, feedbackService, $filter) {
// Constructor for this controller
init();

function init() {
    $scope.feedbackItems = feedbackService.getFeedbackPaged(1234, 1, 20);
}
});

标记

<html ng-app="feedbackApp">
<head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
    <table class="table" style="border: 1px solid #000; width:50%;">
        <tr ng-repeat="fb in feedbackItems | orderBy: 'Id'" style="width:auto !important;">
            <td data-title="Ansvarlig">
                {{ fb.Name }}
            </td>
            <td data-title="Kommentar">
                {{ fb.Comment }}
            </td>
        </tr>
    </table>
</body>

但是当我运行应用程序时,表是空的。我认为这是因为应用程序在服务数据添加到viewmodel($ scope)之前启动,但我不知道在应用程序启动之前如何使其初始化,因此前20个表行是显示。

有谁知道怎么做?

提前致谢!

1 个答案:

答案 0 :(得分:19)

您应该稍微修改一下代码以使其正常工作,因为您正在使用promise,您应该使用.then

app.service('feedbackService', function ($http) {
this.getFeedbackPaged = function (nodeId, pageNumber, take) {
    return $http.get('myUrl');
};
});

app.controller('feedbackController', function ($scope, feedbackService, $filter) {
// Constructor for this controller
init();

function init() {
   feedbackService.getFeedbackPaged(1234, 1, 20).then(function(data){$scope.feedbackItems=data;});
}
});