如何将Bluebird与Angular一起使用?

时间:2014-06-01 21:06:09

标签: javascript angularjs promise bluebird angular-promise

我尝试使用Angular和Bluebird承诺:

HTML:

<body ng-app="HelloApp">
    <div ng-controller="HomeController">{{name}} {{also}}</div>
</body>

JS:

// javascript
var app = angular.module('HelloApp', []);

app.controller("HomeController", function ($scope) {
    var p = Promise.delay(1000).then(function () {
        $scope.name = "Bluebird!";
        console.log("Here!", $scope.name);
    }).then(function () {
        $scope.also = "Promises";
    });
    $scope.name = "$q";
    $scope.also = "promises";
});

window.app = app;

[Fiddle]

但是,无论我尝试什么,它都会保持"$q promises"并且没有更新。除非我添加了一本我宁愿避免使用的手册$scope.$apply

如何让Bluebird与AngularJS合作?

(我知道这是可能的,因为$ q会这样做)

我正在使用Bluebird 2.0,我得到了here

2 个答案:

答案 0 :(得分:59)

这是可能的,甚至很容易!

好吧,如果我们看一下Angular's own promises work的方式,我们需要让Bluebird到某处$evalAsync才能获得完全相同的行为。

如果我们这样做,两个实现都符合Promises/A+这一事实意味着我们可以在$q代码和Bluebird代码之间互操作,这意味着我们可以自由地使用Angular代码中的所有Bluebird功能。

Bluebird公开了此功能及其Promise.setScheduler功能:

// after this, all promises will cause digests like $q promises.
function trackDigests(app) {
    app.run(["$rootScope",function ($rootScope) {
        Promise.setScheduler(function (cb) {
            $rootScope.$evalAsync(cb);
        });
    }]);
}

现在我们要做的就是添加一个:

trackDigests(app); 
var app = ...行之后

行,一切都会按预期工作。对于奖励积分,将Bluebird放入服务中,这样您就可以注入它而不是在全局命名空间中使用它。

以下是说明此行为的[Fiddle]。

请注意,除了Bluebird超过$q的所有功能外,其中一个更重要的功能是Bluebird将运行$exceptionHandler,而是会自动跟踪未处理的拒绝,所以你可以throw自由地使用Bluebird的承诺,而Bluebird会把它们搞清楚。此外,调用Promise.longStackTraces()可以帮助调试很多。

答案 1 :(得分:0)

图书馆Angular bluebird promises$q服务替换为bluebird$http也通过蓝鸟

运行