Question

我正在使用Ionic和ngCordova构建移动应用程序。希望尽可能在浏览器中进行开发，我想在我的app.js的配置块中使用$provide覆盖ngCordova方法以返回模拟响应（因为它们依赖于设备功能）。

这样的事情：

.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方法返回一个承诺，由于您无法在{{$q中注入$q，我无法模拟.config的承诺1}}阻止。

我可以使用$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。

使用$ provide和$ q

2 个答案: