AngularJS - 在视图之间显示数据的问题答案

【问题标题】：AngularJS - Problems displaying data between viewsAngularJS - 在视图之间显示数据的问题
【发布时间】：2015-04-26 09:52:42
【问题描述】：

我正在开发一个简单的 Angular 应用程序，该应用程序具有“帖子”和与帖子相关联的“cmets”。

我有两个视图：“主页”和“帖子”。

例如：

通过主视图创建帖子
尝试通过“posts/{id}”查看特定的帖子和cmets

我在尝试在主页视图和帖子视图之间传输数据时遇到问题。我的所有视图都在一个“静态”目录中，我没有收到任何控制台错误，所以我不太确定问题出在哪里。

app.js

angular.module('flapperNews', ['ui.router'])

// Set routing/configuration
// ------------------------------
.config(['$stateProvider', '$urlRouterProvider',

    // Set state providers
    function($stateProvider, $urlRouterProvider) {$stateProvider

        // Home state
        .state('home', {
          url: '/home',
          templateUrl: '/static/home.html',
          controller: 'MainCtrl'
        })

        // Posts state
        .state('posts', {
          url: '/posts{id}',
          templateUrl: '/static/posts.html',
          controller: 'PostsCtrl'
        })

        $urlRouterProvider.otherwise('home');
    }
])


// Posts factory
// Factories are used to organize and share code across the app.
// ------------------------------
.factory('posts', [function(){

    // create new obect with array of posts
    var o = { posts: [] };
    return o;

}])


// Main controller
// ------------------------------
.controller('MainCtrl', ['$scope', 'posts',

    // Main scope (used in views)
    function($scope, posts){

        // array of posts
        $scope.posts = posts.posts;

        // Add post function
        $scope.addPost = function(){
            // prevent empty titles
            if(!$scope.title || $scope.title === '') { 
                return;
            }
            // push new post to array
            $scope.posts.push({
                title: $scope.title, 
                date: new Date().toJSON().slice(0,10),
                comments: [
                    {author: 'Joe', body: 'Cool post!'},
                    {author: 'Bob', body: 'Great idea but everything is wrong!'}
                ]
            });

            // reset title
            $scope.title = '';
        };
    }

])

// Posts controller
// ------------------------------
.controller('PostsCtrl', ['$scope', '$stateParams', 'posts',

    // Main scope (used in views)
    function($scope, $stateParams, posts){
        $scope.post = posts.posts[$stateParams.id];
    }

]);

观看次数：

index.html

<html>

<head>
  <title>My Angular App!</title>
  <link href="css/main.css" rel="stylesheet" type="text/css">
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
  <script src="js/app.js"></script>
</head>

<!-- start body -->
<body ng-app="flapperNews">
  <!-- render template -->
  <ui-view>
  </ui-view>
  <!-- end render -->
</body>
<!-- end body -->

静态/home.html

<div class="page-header">
  <h1>Aloof News</h1>
</div>

<!-- list all posts -->
<table ng-repeat="post in posts | orderBy: 'date':true">
  <tr>
    <td>{{post.title}}</td>
    <td>{{post.date}}</td>
    <td><a href="/posts/{{$index}}">Comments</a></td>
  </div>
  </tr>
</table>
<!-- end list -->

<!-- add a post -->
<form ng-submit="addPost()">
  <input type="text" ng-model="title"></input>
  <button type="submit">Post</button>
</form>
<!-- end add -->

静态/posts.html

<h3>
  <a ng-show="post.link" href="{{post.link}}">
    {{post.title}}
  </a>
</h3>

<div ng-repeat="comment in post.comments">
  {{comment.author}} <br>
  {{comment.body}}
</div>

有什么建议吗？

【问题讨论】：

似乎在帖子的网址中缺少/，并且还有一些无效的html
也不要在href中使用#，除非您使用的是html5mode并且没有在代码中显示它
谢谢！将 # 添加到 cmets 链接修复它... 评论

标签： javascript angularjs

【解决方案1】：

看看你在这个 Plunker 中的代码：http://plnkr.co/edit/1VQAuxO0rN9jQ93sdA7t?p=preview

我必须做的一些改变是：

// Posts state
    .state('posts', {
      url: '/posts/{id}',
      templateUrl: 'posts.html',
      controller: 'PostsCtrl'
    })

主页.html

<table ng-repeat="post in posts | orderBy: 'date':true">
  <tr>
   <td>{{post.title}}</td>
   <td>{{post.date}}</td>
   <td><a ui-sref="posts({id:$index})">Comments</a></td>
 </tr>
</table>

【讨论】：