如何在 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>

此代码实际上是 returns 数据，但不会打印在我的 html 页面上。请问有人可以帮忙吗？谢谢

Answer 1

您正在反转不同的承诺模式。

您的代码应该是：

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

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


});

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

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

Answer 2

设置您的 menuService 稍有不同，您可能会受益。尝试以下...

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

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

    return {
        'getData' : getData
    }
});

现在我们在 getData() 函数中的 $http 调用中包装了一个函数，我们现在可以轻松地利用 then() 来解决 getData() 在.run()，确保我们得到一个解析值，$rootScope.menu 得到我们想要的值。 menuService 上的这个新设置现在设置了景观以在以后添加其他功能，我们可能需要。

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

查看 $http 文档以更好地理解异步行为

如何在 Angularjs 的所有范围内提供数据

How to make data available in all scopes in Angularjs

html

javascript

angularjs

angularjs-service

angularjs-scope