使用$provide和$q

Question

我正在使用Ionic和ngCordova一起开发一个移动应用程序。为了尽可能在浏览器中进行开发，我希望覆盖ngCordova方法来返回模拟响应(因为它们依赖于设备特性)，在$provide中使用app.js的配置块。

就像这样：

.config(function($stateProvider, $urlRouterProvider, $provide) {

    if(!window.cordova) {
        $provide.value('$cordovaCapture', {
            captureImage: function() {
                return {
                    end: 0,
                    fullPath: "http://static2.shop033.com/resources/18/160536/picture/A1/85135265.jpg",
                    lastModified: null,
                    lastModifiedDate: 1412269066000,
                    localURL: "cdvfile://localhost/temporary/device-specific-file.jpg",
                    name: "photo_013.jpg",
                    size: 440614,
                    start: 0,
                    type: "image/jpeg"
                }
            }
        });
    }

}

但是，ngCordova captureImage方法返回一个承诺，由于不能在.config块中注入$q，所以不能用$q模拟承诺。

是否有不同的地方可以使用$provide与$q一起覆盖这些服务？

Answer 1

你应该用一个工厂而不是一个值来进行注射。

.config(function($stateProvider, $urlRouterProvider, $provide) {

    if(!window.cordova) {
        $provide.factory('$cordovaCapture', function($q){
            return {
                captureImage: function() {
                    // Use $q here 
                    return {
                        end: 0,
                        fullPath: "http://static2.shop033.com/resources/18/160536/picture/A1/85135265.jpg",
                        lastModified: null,
                        lastModifiedDate: 1412269066000,
                        localURL: "cdvfile://localhost/temporary/device-specific-file.jpg",
                        name: "photo_013.jpg",
                        size: 440614,
                        start: 0,
                        type: "image/jpeg"
                    };
                }
            };
        });
    }

}

Answer 2

您需要做的是使用$provide.decorator()。如文件所述：

服务装饰器拦截服务的创建，允许它覆盖或修改服务的行为。装饰器返回的对象可以是原始服务，也可以是替换或包装并委托给原始服务的新服务对象。

代码应该如下所示：

.config(function($stateProvider, $urlRouterProvider, $provide) {

    if(!window.cordova) {
        $provide.decorator('$cordovaCapture', ['$delegate', '$q', function($delegate, $q) {

            var createResolver = function(mockupOptions) {
                return function(options) {
                    var deferred = $q.defer();
                    deferred.resolve(mockupOptions);
                    return deferred.promise;
                };
            };

            $delegate.captureAudio = createResolver({
                // captureAudio default options
            });

            $delegate.captureImage = createResolver({
                // captureImage default options
            });

            $delegate.captureVideo = createResolver({
                // captureVideo default options
            });

            return $delegate;
        });
    }

};

还有一件事，$delegate参数实际上是原始服务的注入实例，这是上面示例中的$cordovaCapture。