javascript - 将服务有条件地注入(inject) AngularJS Controller 的最佳实践

Question

我有一个关于 Angular 依赖注入(inject)的问题。这个问题的 tldr 是:有没有办法告诉 Angular 不要注入(inject)你要求的所有依赖项——这样它就不会抛出错误。我想要此功能的原因是因为我正在为常规路线 (/addPlayer) 和允许用户添加玩家的模式使用 Controller 。换句话说，我有 addPlayer.html 及其 Controller addPlayer.js。我想允许用户也通过模式添加用户。此模式使用 addPlayer.html 和 addPlayer.js。但是，在使用模式时，我需要注入(inject) $modalInstance。当不使用模态时，我不需要注入(inject) $modalInstance。目前我的代码在访问“/addPlayer”时出错，因为它说找不到 $modalInstance。

更多详情:

我有一个页面(/sportsTeams，由 SportsTeamsCtrl 控制)，其中包含供用户选择的球员列表。其中一个选项是“--- 添加新玩家 ---”，选中后将触发模式打开，允许用户添加新玩家。

我的代码看起来像这样:

首先，我有一个页面 (/sportsTeams) Controller ，用户可以在其中选择/添加球员。这个 Controller 有一个启动新模态的选项，它使用我在“ModalsService”中定义的函数。我写一个ModalsService的原因是因为我希望能够从其他各种页面添加播放器，我不想一遍又一遍地写相同的代码。

App.controller('SportsTeamsCtrl', function($scope, ModalsService) {

    $scope.selectOption = function(option) {
       if (option == '--- Add New Player ---') {
           ModalsService.launchPlayerModal().then(function(newOption) {
              $scope.player = newOption;
           }, function(err) {
              console.log(err);
           });
       }
    }
}

然后，我的“ModalsService”看起来像这样:

App.factory('ModalsService', function($modal, $q) {

  var launchPlayerModal = function() {
    var deferred = $q.defer();
    var modalInstance = $modal.open({
      templateUrl: '/partials/addPlayer.html',
      controller: 'AddPlayerCtrl',
      size: 'lg',
      resolve: {
        isModal: function() {return true;}
      }
    });
    modalInstance.result.then(function(selectedPlayer) {
      deferred.resolve(selectedPlayer);
    }, function() {
      deferred.reject();
      console.log('modal dismissed at ' + new Date());
    });
    return deferred.promise;
  };

}

可以看到，ModalsService中的'launchPlayerModal'函数调用了$modal提供的$open函数。它使用“AddPlayerCtrl”。它返回一个 promise 。

现在，这是我遇到问题的地方。在“AddPlayerCtrl”中，我有以下代码

App.controller('AddPlayerCtrl', function($scope, isModal, $modalInstance) {

  $scope.isModal = isModal;

  $scope.addPlayer = function(player) {

      addPlayerToDatabase(category).then(function(data) {

        if ($scope.isModal) {
          $modalInstance.close(data);
        }

      }, function(err) {
        console.log(err);
      });
  };
} 

所以我遇到的问题是因为一个简单的原因:我想使用这个“SportsTeamCtrl”作为模态和到“/addPlayer”的常规路由的 Controller 。基本上，当我的站点转到“/addPlayer”时，我想使用“AddPlayerCtrl”。另外，当我有一个页面包含用于选择播放器的下拉选项列表并且其中一个选项将启动用于添加播放器的模式时，我想使用相同的“AddPlayerCtrl”。

问题是我只需要在使用模式时注入(inject) $modalInstance。如果我不使用模式，则不需要注入(inject) $modalInstance。

目前，当我转到“/addPlayer”时，出现以下错误:

Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance

我明白为什么我会收到这个错误 - 这是因为当我转到“/addPlayer”时，$modal.open 没有注入(inject) $modalInstance。

所以我的问题是 - 有条件地注入(inject) $modalInstance 或任何服务的最佳方式是什么。

另外，我知道我可能会收到很多回复说我应该只有两个单独的 Controller ，一个用于“/addPlayer”路由，另一个用于加载“addPlayer”内容的模式。我知道我可以使用 Controller 继承，但我不确定这是否是最好的方法。

Answer 1

您应该制作 2 个独立的 Controller 并将共享逻辑推送到服务中。

然后将共享逻辑服务注入(inject)到两个 Controller 中。

希望这对您有所帮助。