无法让 Angularjs 承诺正常工作

Question

我知道在把握承诺时我仍然缺少一些东西。我创建了这个 jsfiddle 来突出我的问题。我试着倒计时然后去 BOOM！然而，繁荣首先到来，然后是倒计时。我做错了什么/错过了什么？

http://jsfiddle.net/urAZ7/1/

HTML

<div ng-app="" ng-controller="Controller">
    <pre>{{output}}</pre>
</div>

JS

function Controller($scope, $q) {
    $scope.output = "Boom Goes the Dynamite in... "
    $scope.countdown = 10;

    var defer = $q.defer();

    defer.promise
        .then(function() {
            var timer = setInterval(function() {
                $scope.output+="\n " + $scope.countdown;
                $scope.$apply();
                if ($scope.countdown === 0) {
                    clearInterval(timer);
                }
                $scope.countdown--;    
            },1000);

            return true
        })
        .then(function(data) {    
            $scope.output+="\n " + "BOOM!!!!!";
        });

    defer.resolve();
}

Answer 1

您应该仅在异步操作完成后才解决 Promise。所以你需要把resolve移动到setInterval：

function Controller($scope, $q) {
    $scope.output = "Boom Goes the Dynamite in... "
    $scope.countdown = 10;

    var defer = $q.defer();

    defer.promise.then(function() {
        $scope.output += "\n " + "BOOM!!!!!";
    });

    var timer = setInterval(function() {
        $scope.output += "\n " + $scope.countdown;
        $scope.$apply();
        if ($scope.countdown === 0) {
            clearInterval(timer);
            defer.resolve(); // <--- resolve here
        }
        $scope.countdown--;
    }, 1000);

}

http://jsfiddle.net/urAZ7/4/