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(); 
     } 
    } 
}]);