AngularJS - 服務兩個控制器之間共享與異步調用

Question

我新的角度，我面臨的一些問題...

我有一個共享相同的控制器兩個指令和控制是一個服務請求json文件在異步調用（$ http）。

指令需要相同的數據，並且兩者幾乎都是同一時間，但我只想進行一次調用並將數據檢索到控制器並使用數據更新視圖。

MainMenuHeader.js

(function() { 
var app = angular.module("mainMenuHeaderModule", ["mainMenuControllerModule"]); 

app.directive("mainheader", function() { 
    return { 
     restrict: "A", 
     transclude: true, 
     templateUrl: "TMainMenuHeader.html", 
     controller: "mainMenuController", 
    } 
});})(); 

MainMenuAside.js

(function() { 
var app = angular.module("mainMenuAsideModule", ["mainMenuControllerModule"]); 

app.directive("mainaside", function() { 
    return { 
     restrict: "A", 
     transclude: true, 
     templateUrl: "TMainMenuAside.html", 
     controller: "mainMenuController" 
    } 
});})(); 

MainMenuController.js

 (function() { 
     var app = angular.module("mainMenuControllerModule", ["mainMenuServiceModule"]); 

     app.controller("mainMenuController", ["$scope", "MainMenuService", 
      function ($scope, MainMenuService) 
      { 

       $scope.menuList = MainMenuService.GetAsyncData(); 

       console.log("mainMenuController menuList: " + $scope.menuList); 
     }]); 
    }) 
(); 

MainMenuService.js

(function() { 
    var module = angular.module("mainMenuServiceModule", []); 

    module.factory("MainMenuService", ["$q", "$http", function ($q, $http) 
    { 
     var data; 

     var getAsyncData = function() 
     { 
      console.log(" -> getting data..."); 
      $http.get("menu.json") 
      .success(function(result) 
      { 
       data = result; 

       console.log("async data: " + data); 
      }); 

      return data; 
     } 


     var getDataObject = function() 
     { 
      return [ 
         { 
          id:1, 
          title: "Menu 1", 
          submenus: [ 
           { 
            title: "Sub Menu 1", 
            itens: [ 
             { title: "Option 1" }, 
             { title: "Option 2" }, 
             { title: "Option 3" } 
            ] 
           } 
          ] 
         }, 
         { 
          id:2, 
          title: "Menu 2", 
          submenus: [ 
           { 
            title: "Sub Menu 2", 
            itens: [ 
             { title: "Option 1" }, 
             { title: "Option 2" }, 
             { title: "Option 3" }, 
             { title: "Option 4" }, 
             { title: "Option 5" } 
            ] 
           } 
          ] 
         }, 
         { 
          id:3, 
          title: "Menu 3", 
          submenus: [ 
           { 
            title: "Sub Menu 3", 
            itens: [ 
             { title: "Option 1" }, 
             { title: "Option 2" }, 
             { title: "Option 3" } 
            ] 
           } 
          ] 
         } 
        ]; 
     } 

     return { 
      GetDataObject : function() 
      { 
       return getDataObject(); 
      }, 

      GetAsyncData : function() 
      { 
       return getAsyncData(); 
      } 
     } 
    }]); 
})(); 

這項服務是兩種方法。 一個返回一個JS對象僅用於測試，另一個返回一個不工作的$ http請求。

我也試過從服務返回一個延期並等待響應的控制器，但沒有成功，也許我犯了一些錯誤......有人可以幫我嗎？

我也做了一個plunker所以你看到在行動的問題......

http://plnkr.co/edit/7NIPeAsUYlh96p3hUij7

感謝您的時間... =）創建

Answer 1

好事一plunker。

的問題是在服務這一功能：

var data; 
var getAsyncData = function() 
{ 
    console.log(" -> getting data..."); 
    $http.get("menu.json") 
    .success(function(result) 
    { 
     data = result; 

     console.log("async data: " + data); 
    }); 

    return data; 
} 

基本上你返回一個未定義的變量到控制器，然後進行HTTP請求，當你獲得響應更新數據引用結果，但在控制器$ scope.menuList仍然指向未定義（你沒有更新從函數返回的對象）。

來解決它，你有兩個選擇：

的視圖，你在服務返回，然後當你從HTTP調用的響應更新對象屬性的對象的屬性綁定。 here's the relevant plunker

另一種選擇是，對於異步調用的服務返回一個承諾，一旦承諾解決該控制器可與請求的結果更新範圍。 here's the relevant plunker

Answer 2

我改變了一下我的服務...如果另一個請求是在另一個運行時發送的，則返回數據引用，並且每個正在調用的人都將在完成時更新：

module.factory("MainMenuService", ["$http", function ($http) 
{ 
    var isRequesting = false; 
    var data = {}; 

    var getAsyncData = function() 
    { 
     if (isRequesting) return data; 

     isRequesting = true; 

     console.log(" -> getting async data..."); 
     $http.get("json/mainMenu.json") 
     .success(function (result) 
     { 
      isRequesting = false; 

      angular.forEach(result, function (value, key) 
      { 
       value.id = key; 
       switch(value.submenus.length) 
       { 
        case 1: value.columnsSize = 12; break; 
        case 2: value.columnsSize = 6; break; 
        default: value.columnsSize = 4; break; 
       } 
      }) 

      data.menuList = result; 

      console.log(" -> data.menuList : " + data.menuList); 
     }); 

     return data; 
    } 

    return { 
     GetAsyncData: function() 
     { 
      return getAsyncData(); 
     } 
    } 
}]);