Question

我试图通过加载控制器调用angular.js中的服务并返回一个promise。然后我期望履行承诺并更新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。任何和所有的帮助将不胜感激。

Answer 1

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

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

在此之前，$http会返回success()和error()的承诺。

虽然您也可以使用then

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

所以你说得对。

Answer 2

来自http呼叫的数据是什么样的？您的代码有效 - 我使用$timeout在http://jsfiddle.net/Cq5sm/创建了它的版本。

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

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

它应该有用

Answer 3

在较新的Angular版本（我认为v 1.2 RC3 +）中，您必须配置角度才能使展开功能正常工作（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;
});

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

AngularJS：服务数据绑定

3 个答案: