Question

我有导航栏，家庭内容和页脚。在所有这些中我需要显示相同的数据，但它们位于不同的控制器中。我尝试在运行阶段执行一个请求，并将数据插入服务并共享此数据。但问题是由于承诺模式的延迟。我试图避免把它放在rootScope中。有人有更好的想法吗？

运行阶段的示例：

    PostsService.getPosts().then(function(data) {
      PostsService.posts = res.data;
    }

the controllers:

//home
    $stateProvider
      .state('home', {
         url: "/",
         controller:HomeController,
         templateUrl: "views/home/index.html"
    });

// nav controller

    $scope.posts= PostsService.posts;

    console.log(PostsService.posts) // is an empty array

the html:

//home view

//return data

    <div ng-repeat="posts in posts">
      <p>{{post.body}}</p>
    </div>

//nav view is not return data

    <section ng-controller="NavController">
    <div ng-repeat="posts in posts">
      <p>{{post.body}}</p>
    </div>
    </section>

//footer
    <section ng-controller="FooterController">
    <div ng-repeat="posts in posts">
      <p>{{post.body}}</p>
    </div>
    </section>

plunker： http://plnkr.co/edit/CmpkURaG3ynIBVxwSpAM?p=preview

Answer 1

如果您正在使用ui-router，则可以将加载逻辑置于状态resolve（而不是通用run函数）等待状态分辨率直到加载完成。然后，您可以将已解析的本地服务注入状态控制器（您甚至可以在子状态下执行此操作）。

$stateProvider.state('home', {
    // ...
    resolve: {
        posts: ['PostsService', function (PostsService) {
            return PostsService.getPosts();
        }]
    },
    controller: ['$scope', 'posts', function ($scope, posts) {
        $scope.posts = posts;
    }]
});

See documentation.

Answer 2

你能详细说明“因为承诺模式延迟”吗？使用Service或$ rootScope的方式使用此代码应该没有区别。

Answer 3

服务是单身人士。在模块的所有部分（控制器，工厂等）中，我们的变量ServicePost指向同一个对象。因此，如果您在＆＃34中更改变量posts;运行＆＃34;阻止，在控制器中值也会改变。为什么不呢？

JS：

angular.module('app', ['app.posts-service' /*our service  there*/])
.run(function(PostsService) {
    PostsService().getPosts().then(function(data) {
        PostsService.posts = res.data;
    })
})
.controller('One', function($scope, PostsService) {
    $scope.PostsService = PostService;
})
.controller('Two', function($scope, PostsService) {
   $scope.PostsService = PostService;
});

HTML：

<div ng:controller="One">
    <ul>
        <my:post ng:repeat="post in PostsService.posts" />
    </ul>
</div>
<div ng:controller="Two">
    <ul>
        <my:post ng:repeat="post in PostsService.posts" />
    </ul>
</div>

Answer 4

最后调试了你的plunker，问题似乎在于对象引用。

您正在使用

UsersService.users = data.res

因此在呼叫和呼叫改变之前用户的引用。在获取数据之前正在加载MainCtrl（使用控制台语句确认加载顺序）之后正在加载NavCtrl。

因此MainCtrl仍然绑定到旧的用户对象引用[]，并且即使在获取数据后仍继续绑定到此对象，因为此方法创建新的用户对象而不是更新旧的用户对象。

一个简单的解决方案是保持引用相同：

app.run(function($http, usersService) {

  $http.get('http://jsonplaceholder.typicode.com/users').then(function(res) {

    usersService.users.length = 0 ;// empties the user object
    //copy the array
    Array.prototype.push.apply(usersService.users, res.data);
  });
});

在页面上有三个部分的角度请求

4 个答案: