Question

我有一个设置，我使用服务将数据发送到代理服务器。它看起来像这样：

    angular.module('app').service('apiService', ApiService);

function ApiService($http) {
    this.$http = $http;
};

ApiService.prototype.uploadFile = function(fileContent) {
    $.ajax({
        url: "/space_uploadFile/",
        type: "POST",
        dataType: "json",
        data: {
            fileContent: fileContent
        },

        contentType: "application/json",
        cache: false,
        timeout: 5000,
        complete: function() {
          //called when complete
          console.log('process complete');
        },
        success: function(data) {
          console.log(data);
          console.log('process success');
       },
        error: function() {
          console.log('process error');
        },
      });
};

接下来我正在调用一个处理文件加载和裁剪图像的指令

use strict';
angular
    .module('app')
    /**
    * The ng-thumb directive
    * @author: nerv
    * @version: 0.1.2, 2014-01-09
    */
    .directive('ngThumb', ['$window', 'apiService', function($window, apiService) {
        var helper = {
            support: !!($window.FileReader && $window.CanvasRenderingContext2D),
            isFile: function(item) {
                return angular.isObject(item) && item instanceof $window.File;
            },
            isImage: function(file) {
                var type =  '|' + file.type.slice(file.type.lastIndexOf('/') + 1) + '|';
                return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
            }
        };

        return {
            restrict: 'A',
            template: '<canvas/>',
            link: function(scope, element, attributes) {
                if (!helper.support) return;

                var params = scope.$eval(attributes.ngThumb);

                if (!helper.isFile(params.file)) return;
                if (!helper.isImage(params.file)) return;

                var canvas = element.find('canvas');
                var reader = new FileReader();

                reader.onload = onLoadFile;
                reader.readAsDataURL(params.file);


                function onLoadFile(event) {
                    var img = new Image();
                    img.onload = onLoadImage;
                    img.src = event.target.result;
                }
                function uploadFile(imageData){
                    var self = this;
                    apiService.uploadFile(imageData);
                }

                function onLoadImage() {
                    var width, height;
                    if (params.height>params.width) {
                        width=params.width*3;
                        height=width;
                    } else {
                        height = params.height*3;
                        width=height;
                    }
                    var maxWidth=600;
                    if (width<maxWidth) {   
                        maxWidth=width;
                    }
                    //width = params.width || this.width / this.height * params.height;

                    canvas.attr({ width: width, height: height });
                    canvas[0].getContext('2d').drawImage(this, 0, 0, maxWidth, maxWidth, 0,0, width, height);
                    //canvas[0].getContext('2d').drawImage(this, 0, 0, width, height);
                    var image = canvas[0].toDataURL();
                    uploadFile(image);
                }
            }
        };
    }]);

现在我需要将Ajax请求返回的数据（数据变量）传递给我的控制器

angular.module('app').controller('newProjectController', newProjectController);


function newProjectController($rootScope, $scope, $location, apiService, FileUploader) {
    this.apiService = apiService;
    /*$scope.encoded = $base64.encode('a string');
    console.log($scope.encoded);
    $scope.decoded = $base64.decode('YSBzdHJpbmc=');*/
    $rootScope.img="";

    var uploader = $scope.uploader = new FileUploader({
            url: '/space_uploadFile'
        });

        // FILTERS

        uploader.filters.push({
            name: 'imageFilter',
            fn: function(item /*{File|FileLikeObject}*/, options) {
                var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
                return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
            }
        });
}

我想办法将$rootScope注入服务或将数据从Ajax请求返回到指令。对于其他上传，我正在使用$http.get(...)，但我无法弄清楚如何使用json编码的base64图像。

有人可以给我一个提示吗？谢谢！

更新1。 我试过丹尼尔斯的建议。我的手表看起来像这样

$scope.file=apiService.file;

        $scope.$watch("apiService.file", function (newVal, oldVal, scope) {
            console.log(newVal);
            console.log("update");
        });

问题是它被调用onload而不是更新变量时......这里有什么问题？

Answer 1

您可以将响应存储在服务中，然后通过向服务器注入服务来在控制器中访问它。您可以在文件变量上放置一个观察程序，以了解它何时发生了变化。

function ApiService($http) {
  this.$http = $http;
  this.file = {};
};

ApiService.prototype.uploadFile = function(fileContent) {
  $.ajax({
    //...
    success: function(data) {
      this.file = data;
    }
  //...
  });
};

另一种选择是使用$rootscope.$broadcast()事件将responsedata发送到您的控制器。

在角度指令，服务和控制器之间共享数据

1 个答案: