angularjs - 使用 $route resolve stops 页面解决 breeze query/Q promise

Question

在呈现 View 之前，我在使用 Angular 解析执行 Breeze 查询时遇到问题。在 Breeze 渲染 View 之前，我试图从服务器获取一些数据。我正在使用

$routeProvider.when('/countries', { templateUrl: 'App/partials/countries.html', controller: Ctrl, resolve: Ctrl.resolve }).

Controller 和服务片段:

function Ctrl($scope, Q, datacontext, countries) {

//...

}

function getCountries(forceRefresh) {

            var query = entityQuery.
                from("countries").
                orderBy("name");

            return manager.executeQuery(query).
            then(getSucceeded);

        }

        function getSucceeded(data) {
            return data.results;
        }

这使我的 View 永远不会呈现:

Ctrl.resolve = {
    countries: function (datacontext) {
        return datacontext.getCountries();
    }
}

而如果我创建一个需要更长时间的计时器，它就可以工作。我试过用 $q 包装它，但我似乎无法让它工作。

由于超时，这将呈现 View :

Ctrl.resolve = {
    countries: function (datacontext) {
        return datacontext.getCountries();


    },
    delay: function ($q, $timeout) {
        var delay = $q.defer();
        $timeout(delay.resolve, 6000);
        return delay.promise;
    }
}

如果有人能帮我解决这个问题，那就太好了。我不确定我是否做错了什么，或者 Q promises 或 breeze in resolve 是否存在限制。

Answer 1

我感受到了你的痛苦。 $q/route resolve 实现中的错误之一是 resolve 不支持 Q.then 方法。这违反了支持可互换 promise 实现的普遍接受的做法(叹息)。

但这不是真正的问题。真正的问题是 Angular 不知道你的异步方法何时被解析。您必须在成功和失败回调中手动调用 $rootScope.$apply。 Angular 的 $http 和 $q 为你做这个(或等同的)。自己做对就是 PITA。

正如我所说，我们感受到您的痛苦。很快我们将发布一个微型 Q 插件，将 Q promise 转换为 $q promise ，应该可以减轻这种痛苦。至少它对我有用 :-)。

简而言之，在您的应用程序启动位置附近找到一个地方，然后像这样扩展 Q:

angular.module('app').factory('util', ['$q', '$rootScope', util]);function util($q, $rootScope) {   extendQ();   ... other utilities here ...   // Monkey patch to$q method into Q.js' promise prototype   // ex usage: return manager.executeQuery(qry).to$q(succ, fail);   function extendQ() {       var promise = Q.defer().promise;       var fn = Object.getPrototypeOf(promise);       if (fn.to$q) return; // already extended       fn.to$q = function (success, fail) {           return to$q(this, success, fail);       };   }   function to$q(qPromise, success, fail) {       var d = $q.defer();       qPromise           .then(function (data) {               if (data === undefined) {                   logger.logError("Programming error: no data. " +                   "Perhaps success callback didn't return a value or " +                    "fail callback didn't re-throw error");                   // If an error is caught and not re-thrown in an earlier promise chain                   // you will arrive here with data === undefined.                    // Neglecting to re-throw is a common, accidental omission.                   // To be safe, have every success callback return something                   // and trap here if data is ever undefined               }               d.resolve(data);               $rootScope.$apply();// see https://groups.google.com/forum/#!topic/angular/LQoBCQ-V_tM           })          .fail(function (error) {              d.reject(error);              $rootScope.$apply();// see https://groups.google.com/forum/#!topic/angular/LQoBCQ-V_tM          });       if (success || fail) {           d.promise = d.promise.then(success, fail);       }       return d.promise;   }

现在像这样使用它(基于您的示例):

function getCountries() {    var query = breeze.EntityQuery.from("countries").orderBy("name");    return manager.executeQuery(query).to$q(getSucceeded);    function getSucceeded(data) { return data.results; }}

附录

有人问我:

“为什么这么复杂？为什么不使用 $q.when(qPromse) 将 Q promise 转换为 $q promise？”

我试过了……但没能成功。具体来说，我试过这个:

function to$q(qPromise, success, fail) {    var promise = $q.when(qPromise);    if (success || fail) {       promise = promise.then(success, fail);    }    return promise;}

我认为 $q.when 有问题。