2

複数ファイルのアップロードモジュールに取り組んでいますが、を使用せずにサービスからコントローラーに通信する場合にスタックし$rootScopeます。

ディレクティブはファイル入力を監視し、ファイルonchangeをサービスに渡します。サービスでファイルがアップロードされ、アップロードの進行状況が監視されます。（成功、エラー、進行状況の変更からの）応答に基づいて、親コントローラーは親指と進行状況を表示する必要があります。

パターンを静かにする必要があり、1つの親コントローラーだけがアップロードについて知る必要があるため、使用$emitしたくありません。$on$rootScope

問題をよりよく理解するために、いくつかの追加情報を使用して簡略化された（！）プランカーを作成しました。

コントローラーが変更に対応する別の方法はありますか（サービスファクトリー内で発生）？
それとも、そのようなことを達成するための完全に異なる方法ですか？

4

1 に答える 1

3

Angularで非同期操作を処理する適切な方法は、promiseを使用することです。

サービスコールからpromiseを返して、それをsrc親指で解決することができます。その場合、ディレクティブをまったく使用できなくなります。

コントローラは次のようにサービスを使用します。

function ParentController($scope, imageService) {
  $scope.change = function() {
    $scope.src = imageService.change();

    $scope.then(function(result) {
      // the loading ended, but there is no need to set the src
      // as it will already bind to src when ends. 
    }, function(err) {
      // something went wrong
    });
  };
 }

あなたのサービス：

app.factory('imageService', function($q, $rootScope) {

  function doTheUploading(defer) {
    if (everythingOk) {
      defer.resolve(thumbSrcString); 
    } else {
      defer.reject({something: 'an error ocurred'});
    }
  }

  return {
    change: function() {
      // creates the promise
      var defer = $q.defer();
      doSomethingAsync(defer);
      return defer.promise;
    }
  };

});

少なくとも、HTMLは次のようになります。

<div ng-controller="ParentController">
  <img src="{{ src }}"><br><br>
  <span class="btn" ng-click="change()">Change!</span>
</div>

進行状況に関しては、コールバックを使用するか、promiseと進行状況インジケーター（つまり:)をもたらすオブジェクトを返す必要がありますreturn {promise: defer.promise, percent: 0}。次に、進行状況インジケーターをサービス内から更新する必要があります。

srcプロパティに設定する前にサーバーから返されたURLに変換が必要な場合は、promiseをチェーンすることもできます。

$scope.src = imageService.change().then(function(result) {
    return 'http://dummyimage.com/' + result;
  });

プランカーを更新しました。

于 2013-03-18T01:09:17.677 に答える