Angular 服务/工厂 - 类属性未在cordova 文件传输中更新 [英] Angular service/factory - class property not updating inside the cordova file transfer

问题描述

我有 Angular 服务，它在移动应用程序中执行 Cordova 文件传输上传 - 它将文件上传到媒体服务器并返回一个对象.我正在尝试将此对象传递给 media_response 属性，但我没有运气 - 我做错了什么?

I have Angular service that does an Cordova File Transfer upload within a mobile app - it uploads a file to media server and returns an object. I am trying to pass this object to the media_response property but i'm having no luck - what I am doing wrong?

请注意 - 我已经尝试使用 service 和 factory 但似乎仍然没有任何乐趣 - $cordovaFileTransfer upload 块中的任何内容出于某种奇怪的原因没有传递给类属性.

Please note - I have tried using a service and factory and still seem to get no joy - anything within the $cordovaFileTransfer upload block isn't passed to the class properties for some bizarre reason.

我期待看到 media_response 与数据变量的输出相同，数据变量是从媒体服务器返回的对象，但它说 no response

I am expecting to see media_response with the same output as the data variable which is an object returned from the media server but it says no response

知道为什么我没有得到预期的响应吗?

Any idea why I'm not getting the expected response?

//预期响应

控制器中的UploadService.media_response 应该是一个对象来匹配console.log(data)

//实际响应

UploadService.media_response 是字符串无响应"

//上传服务

abcdServices.service('UploadService', function($http, $localStorage, $location, $q, $rootScope, $cordovaFileTransfer) {

var UploadService = function() {
    this.upload_in_progress = false;
    this.progress = 0;
    this.media_response = '';
};

UploadService.prototype.cordovaFileUpload = function (filename, url, targetPath) {
    this.upload_in_progress = true;
    this.media_response = 'no response';

    var options = {
        id: new Date() . getTime()  + filename,
        fileKey: "file",
        fileName: filename,
        chunkedMode: false,
        mimeType: "multipart/form-data",
        params : {'fileName': filename}
    };

    $cordovaFileTransfer.upload(url, targetPath, options).then(
        function(result) {
            // Success!
            var data = JSON.parse(result.response);
            console.log('file uploaded - response:', data); // ALWAYS A OBJECT
            this.media_response = 'fake response2';
            UploadService.media_response = 'fake response3';

            if (angular.isDefined(data.id)) {
                angular.forEach(data, function(value, key) {
                    // image[key] = value;
                });
                // $scope.post.linkThumbnail = false;
                // $scope.post.video = '';
            } else if (angular.isDefined(data.message)) {
                // $scope.uploadError = data.message;

            } else {

            }
        }, function(err) {

        }, function (progress) {
            // constant progress updates
            this.progress = parseInt(100 * progress.loaded / progress.total) + '%';
        }
    );

};

return new UploadService();});

//控制器

UploadService.cordovaFileUpload(filename, url, targetPath, options);
console.log(UploadService); // to view in js console

推荐答案

您的 this. 变量的作用域是最近的功能块，而不是服务/工厂.

Your this. variables are scoped to the nearest function block, not the service/factory.

使用 var 或 let 在服务/工厂的根目录中创建变量.

Create your variables in the root of your service/factory with either var or let.

abcdServices.service('UploadService', function($http, $localStorage, $location, $q, $rootScope, $cordovaFileTransfer) {

    let upload_in_progress = false;
    let progress = 0;
    let media_response = '';

    var UploadService = function() {
        upload_in_progress = false;
        progress = 0;
        media_response = '';
    };

    UploadService.prototype.cordovaFileUpload = function (filename, url, targetPath) {
        upload_in_progress = true;
        media_response = 'no response';

        // Rest of your code
    };

return new UploadService();});

<小时>

如果您确实需要/想要使用 this，请使用新的函数箭头表示法，它不会在功能块中创建新的 this 作用域.>

---

If you really need/want to use this, use the new function arrow notation, which does not create a new this-scope in the function block.

abcdServices.service('UploadService', function(...) {

    this.upload_in_progress = 'test';
    this.progress = 0;
    this.media_response = '';

    someFunction = (param1, param2, ..) => {
        console.log(this.upload_in_progress) // 'test'
    }

});

这篇关于Angular 服务/工厂 - 类属性未在cordova 文件传输中更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！