内部通信（向控制器提供服务的指令）

Question

我正在开发一个多文件上传模块，但在不使用 $rootScope 的情况下从我的服务与我的控制器进行通信时卡住了。

指令监视文件输入并将文件onchange 交给服务，在那里它们被上传并监控上传进度。根据响应（来自成功、错误和进度更改），父控制器应显示拇指和进度。

我不想在我的$rootScope 上使用$emit 和$on，因为我需要经常安静的模式并且只有一个父控制器需要知道上传。

我创建了一个简化的（！）Plunkr，其中包含一些附加信息以更好地理解问题。

我的控制器是否有其他方式来响应更改（发生在服务工厂内部）？
或者也许是完全不同的实现方式？

Answer 1

使用 Angular 处理异步操作的正确方法是使用 promises。

您可以从服务调用返回一个承诺并将其解析为拇指的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>

关于进度，您需要使用回调或返回一个可以带来承诺和进度指示器的对象（即：return {promise: defer.promise, percent: 0}）。然后应该从服务内部更新进度指示器。

如果您需要对从服务器返回的 URL 进行任何转换，然后将其设置为 src 属性，您也可以链接您的承诺，即：

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

更新your Plunker。