如何在Angularjs中使数据在所有范围内可用

Question

我希望使用$http从服务器端获取数据，并使其在我的应用程序中的所有路由和控制器中可用。

Javascript代码示例：

myApp.factory('menuService', function($http){

 $http.get('/pages').success(function(data){

        return data; //list of pages
    });
});

myApp.run(function($rootScope, menuService){

    $rootScope.menu = menuService;
});

HTML代码示例

<ul >
    <li ng-repeat="page in menu">{{page.title}}</li>
</ul>

这段代码实际上返回了数据，但没有在我的HTML页面上打印出来。请有人帮忙吗？谢谢。

- The Oracle

---

我认为数据并不像页面列表，至少对于工厂而言不是这样，只有成功才是。你能否将数据包装成菜单服务的变量，并将其绑定到菜单上？ - MVCDS

Answer 1

你正在逆转了deferred promise模式。

相反，你的代码应该是：

myApp.factory('menuService', function($http){

     return $http.get('/pages');


});

myApp.run(function($rootScope, menuService){

     menuService.then(function(data) {
          $rootScope.menu = data;
    }) 
});

- Martin

---

我理解你代码中的逻辑，但不知道为什么我的数据没有按预期打印在屏幕上。我想知道是否需要在我的HTML级别进行任何修改。 - The Oracle

我最终通过将.then()替换为.success()来获得所需的结果，代码如下：myApp.run(function($rootScope, menuService){ menuService.success(function(data){ $rootScope.menu = data; }) }); - The Oracle

如果你采用了我建议的方法，你就可以保留“then”，因为它返回了一个promise。 - scniro

Answer 2

您可能会从稍微不同的设置您的menuService中受益。请尝试以下操作...

myApp.factory('menuService', function($http) {

    function getData() {
        return $http.get('/pages');
    }

    return {
        'getData' : getData
    }
});

现在我们将一个函数包装在$http调用中的getData()函数中，我们现在可以轻松地利用then()来解决由getData()返回的承诺，在.run()中确保我们获得一个已解决的值，$rootScope.menu被分配了我们想要的值。这个在menuService上的新设置现在为以后添加其他功能打下了基础，这是我们可能想要的。

myApp.run(function($rootScope, menuService) {
    menuService.getData().then(function(response) {
        $rootScope.menu = response;
    })
});

请查看$http文档，更好地了解异步行为。

- scniro

---

你的答案和第一个一样。实际上很好。 - The Oracle

有些微不同。如果您以这种方式设置 menuService，则可以使用揭示模块模式将其与其他功能一起扩展。我试图详细说明为什么会发生这种情况，并包含了更多资源。我不认为这是相同的答案。 - scniro