角度指示、サービスとコントローラの間でデータを共有する

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'); 
     }, 
     }); 
}; 

私が今、私はAjaxリクエスト（データ変数）によって返されたデータを必要とする画像のファイルの読み込みやトリミングを処理ディレクティブ

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); 
       } 
      } 
     }; 
    }]); 

を呼び出しています次私のコントローラ

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を送ることであろう。