Angular 1 请求页面上的三个部分

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

终于调试了你的 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);
  });
});

Answer 3

您能否详细说明“由于承诺模式而延迟”？ 与您使用 Service 或 $rootScope 的方式一样，此代码的工作方式应该没有区别。

Answer 4

服务是单例的。在模块的所有部分（控制器、工厂等）中，我们的变量ServicePost 指向同一个对象。因此，如果您在“运行”块中更改变量posts，控制器中的值也会发生变化。 为什么不呢？

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>