Question

我正在开发一个简单的Angular应用程序，该应用程序包含＆＃39;帖子＆＃39;评论＆＃39;与帖子相关联。

我有两种观点：＆＃39;家庭＆＃39;和＆＃39;帖子＆＃39;。

例如：

通过主视图创建帖子
尝试通过＆＃39;帖子/ {id}＆＃39;

我在尝试在家庭和帖子视图之间传输数据时遇到问题。我对“静态”中的所有观点都有所了解。目录，我没有收到任何控制台错误，所以我不确定问题是什么。

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>

任何提示？

Answer 1

查看此Plunker中的代码：http://plnkr.co/edit/1VQAuxO0rN9jQ93sdA7t?p=preview

我必须做的一些改变是：

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

Home.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>

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

1 个答案: