javascript - 在 Angular Directive(指令)、服务和 Controller 之间共享数据

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 请求返回的数据(数据变量)传递给我的 Controller

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 注入(inject)服务或将 Ajax 请求的数据返回到指令。对于其他上传，我正在使用 $http.get(...) 但我无法弄清楚如何使用 json 编码的 base64 图像来做到这一点。

有人可以给我提示吗？已经谢谢了!

更新 1.我试过 Daniels 的建议。我的 watch 是这样的

$scope.file=apiService.file;

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

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

Answer 1

您可以将响应存储在服务中，然后通过将服务注入(inject)到 Controller 中来访问它。您可以在文件变量上放置一个观察器，以了解它何时更改。

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

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

另一种选择是使用 $rootscope.$broadcast() 事件将响应数据发送到您的 Controller 。