在单击按钮之前，嵌套的承诺不会解决

Question

我正在构建一个 AngularJS 应用程序（使用 1.2.0 RC1），它使用 REST API 来保存用户输入的数据。用户将输入有关公司的数据，它包含我需要保存的两个核心组件：

• 公司详情
• 该公司内的联系人

我有 1 个 REST 方法可以调用来保存公司，然后我有另一个方法可以调用来保存每个联系人。

我计划使用$q 跟踪所有请求并在完成后解决它们。

我遇到的问题是，虽然 REST API 被成功调用并且我的所有数据都被保存，但当所有承诺都解决时，我的控制器没有收到通知直到我单击屏幕上的按钮，例如add contact 按钮。我已经尝试消除 REST API 作为问题的根源，但在使用 setTimeout 模拟延迟作业时仍然会发生这种情况。

这是我的service 模块：

angular.module('myApp', ['restService'])
    .factory('service', ['client', '$q', function (client, $q) {
        return {
            create: function (name, people) {
                var deferred = $q.defer();

                setTimeout(function () {
                    console.log('saved company ' + name);

                    var promises = people.map(function (person) {
                        var dfd = $q.defer();

                        setTimeout(function () {
                            console.dir(person);
                            console.log('Person saved');
                            dfd.resolve();
                        }, 100);

                        return dfd.promise;
                    });

                    $q.all(promises).then(deferred.resolve);
                }, 100);

                return deferred.promise;
            }
        };
    }]);

这是我的控制器：

angular.module('club', ['myApp'])
    .controller('RegisterCtrl', ['$scope', 'service', function ($scope, service) {
        $scope.addPerson = function () {
            $scope.company.people.push({
                firstName: '',
                lastName: '',
                email: ''
            });
        };

        $scope.removePerson = function (person, index) {
            $scope.company.people.splice(index, 1);
        };

        $scope.save = function (company) {
            service.createClub(company.name, company.people).then(function () {
                console.log('And we\'re done');
            });
        };

        $scope.company = {
            name: '',
            people: []
        };
    }]);

所以当我调用save 方法（即绑定到按钮的ng-click）时，我将设置一个console.log，如下所示：

saved company
Object
Person saved
Object
Person saved

请注意，没有And we're done 输出。只要我点击addPerson 绑定到ng-click 的按钮，我就会得到最终的消息输出。

Answer 1

Angular 不会神奇地监视所有超时。它需要一个钩子来告知某些事情可能发生了变化，这会触发$digest 循环。

您可以通过调用$scope.$apply() 或使用内置处理程序（如ng-click）手动执行此操作。但是对于这个用例，您还可以使用 $timeout 服务来代替 setTimeout。

见API Reference/ng/$timeout。

Answer 2

强烈建议使用 AngularJS $http 服务与您的 REST API 进行通信，因为它会为您更新模型。

它返回一个承诺，您可以将 success 和 error 处理程序链接到，因此它非常通用。

翻译成你的代码，你可以有这样的服务：

angular.module('myApp', [])
    .factory('person', ['$http', function ($http) {
        return {
            create: function (data) {

                // Return promise
                return $http.post('/yourApiUrl', data);
            }
        };
    }]);

还有这样的控制器：

angular.module('myApp', [])
    .controller('yourController', ['person', function (person) {

        $scope.company = {
            name: '',
            people: []
        };

        $scope.addPerson = function(data){

            //Save person to API
            person.create(data)

                // Success handler
                .success(function(data, status, headers, config) {

                    // Parse person from response (e.g. if your API 
                    // returns the created object after a POST)
                    var person = data;

                    // Add person to company
                    $scope.company.people.push(person)
                })

                // Error handler
                .error(function(data, status, headers, config) {

                    // Handle error
                });

        };

    }]);

通过从服务返回承诺，您可以在控制器中自定义 success 和 error 处理程序，从而实现非常灵活的解决方案。

而且您不必创建自己的承诺。 AngularJS 将为您处理这一切。

希望对你有帮助！

Answer 3

您总是希望在作用域上下文中调用 deferred.resolve() 和 deferred.reject()。在您的情况下，您正在从角度框架之外调用代码（setTimeout，并且实际使用您在评论中提到的用于 Azure 移动服务的 JS 客户端 API），因此您应该将 dfd.resolve() 包装在 $rootScope 中。 $apply() （不要忘记将 $rootScope 注入到您的服务中）。

http://plnkr.co/edit/3sCHEjrtMdqCvFQ7ILTD

这个 Plunkr 展示了一个工作示例。如果您将 $rootScope.$apply(dfd.resolve()) 更改回 dfd.resolve()，它就会出现您在问题中描述的问题。

请注意，由于本文中列出的原因，使用 $rootScope.$apply(function(){dfd.resolve()}) 可能也更好：

http://jimhoskins.com/2012/12/17/angularjs-and-apply.html