AngularJS中的多個視圖，多個解析但只有一個控制器

我有2個視圖共享相同的控制器。在這個視圖的每個視圖中，我都使用resolve來顯示它之前檢索某個日期。然後我將其注入到我的控制器中（所以我爲每個視圖注入兩個依賴項）。AngularJS中的多個視圖，多個解析但只有一個控制器

但問題是，當我從一個視圖轉到另一個視圖時，控制檯顯示錯誤，因爲它看不到其他視圖的依賴性。這是我的路由配置

.state('ambassade', { 
 
       url: '/mot_ambassadeur', 
 
       views: { 
 
        "@": { 
 
         templateUrl: "pages/GestionAmbassade/mot_ambassadeur.html", 
 
         controller: "GestionAmbassadeController", 
 
         resolve: { 
 
          informationsAmbassade: function(GestionAmbassadeService) { 
 
           return GestionAmbassadeService.getMotAmbassadeurService(); 
 
          } 
 
         } 
 
        } 
 
       } 
 
      }) 
 
      .state('personnel', { 
 
       url: '/personnel', 
 
       views: { 
 
        "@": { 
 
         templateUrl: "pages/GestionAmbassade/personnel.html", 
 
         controller: "GestionAmbassadeController", 
 
         resolve: { 
 
          personnelAmbassade: function(GestionAmbassadeService) { 
 
           return GestionAmbassadeService.getPersonnelService(); 
 
          } 
 
         } 
 
        } 
 
       } 
 
      })

這是我的控制器，2次注射是informationsAmbassade和personnelAmbassade：

.controller('GestionAmbassadeController', function ($rootScope, $scope, $injector, $sce, 
 
                 informationsAmbassade, 
 
                 personnelAmbassade) { 
 

 
     $scope.getMotAmbassadeur = function() { 
 
      if (localStorage.getItem("lang") == "fr") { 
 
       $scope.motAmbassadeur = $sce.trustAsHtml(informationsAmbassade.contents[0].translation.fr_fr.contenu); 
 
       $scope.load = true; 
 
      } 
 
      $scope.photoAmbassadeur = informationsAmbassade.contents[0].content.path; 
 

 
     }; 
 

 
     $scope.getPersonnel = function() { 
 
      $scope.Personnels = []; 
 
      if (localStorage.getItem("lang") == "fr") { 
 
       for (var i = 0; i < personnelAmbassade.contents.length; i++) { 
 
        //if (angular.isDefined(res.contents[i].type) && res.contents[i].type.nom == 'personnel') 
 
        $scope.Personnels.push({ 
 
         nom: $sce.trustAsHtml(personnelAmbassade.contents[i].translation.fr_fr.contenu), 
 
         poste: $sce.trustAsHtml(personnelAmbassade.contents[i].translation.fr_fr.titre) 
 
        }); 
 
       } 
 
       $scope.load = true; 
 
      } 
 
     };

所以，當我去AMBASSADE路線它沒有看到personnalAmbassade注射n，反之亦然。我知道我可以爲每個州使用兩種解決方案，但這是我爲了性能目的而避免的。有人可以幫我弄清楚這個「問題」。

來源

2016-06-09 lakhassane

您應該創建一個頂級抽象狀態來解析您的數據，然後確保在您的控制器中加載正確的依賴關係（它們都是）。

.state('app', { 
    abstract:true, 
    template:'<div ui-view></div>', 
    resolve:{ 
     informationsAmbassade: function(GestionAmbassadeService) { 
      return GestionAmbassadeService.getMotAmbassadeurService(); 
     }, 
     personnelAmbassade: function(GestionAmbassadeService) { 
      return GestionAmbassadeService.getPersonnelService(); 
     } 
    } 
} 
.state('app.ambassade', { 
    url: '/mot_ambassadeur', 
    views: { 
     "@": { 
      templateUrl: "pages/GestionAmbassade/mot_ambassadeur.html", 
      controller: "GestionAmbassadeController" 
      } 
     } 
    } 
}) 
.state('app.personnel', { 
    url: '/personnel', 
    views: { 
     "@": { 
      templateUrl: "pages/GestionAmbassade/personnel.html", 
      controller: "GestionAmbassadeController" 
     } 
    } 
})

來源

2016-06-09 12:21:56 Ganbin

您應該在控制器中看到更多面向對象語言的接口。

所以將它命名爲entityService並使其成爲如此，以便您嘗試注入的兩個服務都具有可以從控制器調用的相同名稱的方法。（或者在你的情況 '內容' 陣列）

.controller('GestionAmbassadeController', function ($rootScope, $scope, $injector, $sce,entityService) {

然後在放的決心：

entityService: return GestionAmbassadeService.getPersonnelService();

或

entityService: return GestionAmbassadeService.getMotAmbassadeurService();

根據控制器的實例。

編輯：在這種情況下，爲兩種狀態使用相同的控制器似乎不是一個好主意。無論如何，您只能使用兩個定義的範圍函數中的一個。所以，只有單獨的控制器纔會變得更糟。

來源

2016-06-09 12:24:36

是的，我想過，但是當我頁面太多時，這不是問題嗎？不會太多的控制器有點沉重 – lakhassane

除了你的答案，當使用這種方法時，我認爲我們也應該測試用戶來自哪個狀態。 – lakhassane

更多的小型控制器應該不那麼重，因爲一次只有更少的東西會被初始化。（所有這些東西都懶惰地初始化時，或者至少應該是）。而當您開始測試用戶來自控制器的位置時，您應該將其分開。 –

謝謝你們。兩個答案都解決了這個問題（我試過他們：D）。但我認爲第一個更合適，因爲在第二個時候，當我對同一個控制器的頁面太多時，它會比第一個答案慢一點。

但兩者仍然有效。謝謝。

編輯：當我說第一個時，我在談論鮑勃·布林克斯的回答。當他編輯它時，它會向下移動。

來源

2016-06-09 12:42:18 lakhassane

AngularJS中的多個視圖，多個解析但只有一個控制器

回答

相關問題