有條件地將服務注入AngularJS控制器的最佳實踐

Question

我有一個關於角度依賴注入的問題。 這個問題的tldr是：有沒有辦法告訴Angular不要注入您所要求的所有依賴項-這樣它就不會拋出錯誤。 我之所以需要此功能，是因為我同時將控制器用於常規路線（/ addPlayer）和允許用戶添加玩家的模式。 換句話說，我有addPlayer.html及其控制器addPlayer.js。 我想允許用戶也通過模式添加用戶。 此模式使用addPlayer.html和addPlayer.js。 但是，使用模態時，我需要注入$ modalInstance。 當不使用模式時，我不需要注入$ modalInstance。 當前，當我訪問“ / addPlayer”時，我的代碼給我一個錯誤，因為它說找不到$ modalInstance。

更多細節：

我有一個頁面（/ sportsTeams，由SportsTeamsCtrl控制），其中有一個供玩家選擇的球員列表。 選項之一是“ ---添加新播放器---”，選擇該選項將觸發模式打開，從而允許用戶添加新播放器。

我的代碼如下所示：

首先，我有一個頁面（/ sportsTeams）的控制器，用戶可以在其中選擇/添加玩家。 該控制器具有啟動新模態的選項，該模態使用了我在“ 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”。 它返回一個承諾。

現在，這里是我遇到問題的地方。 在“ 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”的常規路由的控制器。 基本上，當我的網站轉到“ / addPlayer”時，我想使用“ AddPlayerCtrl”。 另外，當我有一個頁面，其中包含用於選擇播放器的下拉選擇列表，並且其中一個選擇將啟動用於添加播放器的模式時，我想使用此SAME'AddPlayerCtrl'。

問題是當我使用模態時，我只需要注入$ modalInstance即可。 如果我不使用模態，則不需要注入$ modalInstance。

當前，當我轉到“ / addPlayer”時，出現以下錯誤：

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

我知道為什么收到此錯誤-這是因為當我轉到'/ addPlayer'時，$ modal.open不會注入$ modalInstance。

所以我的問題是-有條件注入$ modalInstance或任何服務的最佳方法是什么？

另外，我可能會收到很多答復，說我應該只有兩個單獨的控制器，一個用於“ / addPlayer”路由，一個用於加載“ addPlayer”內容的模式。 我知道我可以使用控制器繼承，但是我不確定這是否是最好的方法。

Answer 1

您應該制作2個單獨的控制器，並將共享邏輯推送到服務中。

然后將共享邏輯服務注入兩個控制器中。

希望這可以幫助。

Answer 2

$injector可以幫助您。

• Angular $injector文檔

• 另一篇很好的文章