0

我正在尝试通过加载控制器调用 angular.js 中的服务并返回一个承诺。然后，我希望能兑现承诺并更新 DOM。这不是发生的事情。需要明确的是，我没有收到错误。代码如下。

app.controller('TutorialController', function ($scope, tutorialService) {
    init();
    function init() {
        $scope.tutorials = tutorialService.getTutorials();
    }
});

<div data-ng-repeat="tutorial in tutorials | orderBy:'title'">
    <div>{{tutorial.tutorialId}}+' - '+{{tutorial.title + ' - ' + tutorial.description}}</div>
</div>

var url = "http://localhost:8080/tutorial-service/tutorials";

app.service('tutorialService', function ($http, $q) {   
    this.getTutorials = function () {
        var list;
        var deffered = $q.defer();
        $http({
            url:url,
            method:'GET'        
        })
        .then(function(data){
            list = data.data;
            deffered.resolve(list);
            console.log(list[0]);
            console.log(list[1]);
            console.log(list[2]);

        });
        return deffered.promise;
    };
});

在服务的“.then()”函数内部，我记录了结果，我得到了我期望的结果，它只是永远不会更新 DOM。任何和所有的帮助将不胜感激。

4

3 回答 3

2

getTutorials自己返回承诺。所以你必须再做then()一次。

tutorialService.getTutorials().then(function(data){
    $scope.tutorials = data;
});

在此之前，使用and$http返回一个承诺。success()error()

虽然你也可以then使用

由于调用$http函数的返回值是一个promise，你也可以使用then方法注册回调，这些回调将接收一个参数——一个代表响应的对象。

所以你是正确的。

于 2014-04-05T16:54:41.390 回答
0

您来自 http 调用的数据是什么样的？您的代码有效 - 我在这里创建了一个版本http://jsfiddle.net/Cq5sm/使用$timeout.

因此，如果您的列表如下所示：

[{ tutorialId: '1',
   title : 'the title',
   description: 'the description'
 }]

它应该工作

于 2014-04-05T16:55:23.860 回答
0

在较新的 Angular 版本（我认为 v 1.2 RC3+）中，您必须配置 angular 才能使展开功能正常工作（DEMO）：

var app = angular.module('myapp', []).config(function ($parseProvider) {
    $parseProvider.unwrapPromises(true);
});

这允许您直接将承诺分配给 ng-repeat 集合。

$scope.tutorials = tutorialService.getTutorials();

除此之外，我个人更喜欢手动包装：

tutorialService.getTutorials().then(function(tutorials){
    $scope.tutorials = tutorials;
});

我不知道他们从默认配置中删除该功能的确切原因，但看起来角度开发人员也更喜欢第二个选项。

于 2014-04-05T17:15:24.707 回答