Question

我正在尝试让PostsCtrl控制器显示我在MainCtrl中的addPost函数中的注释。我的目标是能够发布与帖子相关联的评论（在右侧窗格中）（在左侧窗格中）。我没有初始化某些内容，或者我的addComment函数中是否缺少某些内容？

---
name: home
url: /
---
<br>
<div class="grid-container">
    <div class="grid-block">
      <div class="grid-block">

        <div id="chatBlock" class="small-12 medium-8 grid-content medium-order-1">
          <div class="card">
            <div ng-repeat="post in posts | orderBy: '-upvotes'" class="card-section">
              <a ng-click="incrementUpvotes(post)"><img zf-iconic="" icon="thumb" size="medium"></a>
              <a ng-show="post.link" href="{{post.link}}">
                {{post.title}}
              </a>
              <span ng-hide="post.link" class="">
                {{post.title}}
              </span> | <span ng-model="post.upvotes">upvotes: </span><span class="success badge">{{post.upvotes}}</span>
              <span>
                  <a href="#/posts/{{$index}}">Comments</a>
              </span>
            </div>
          </div>
        <br>
        <form ng-submit="addPost(post)">
          <input type="text" ng-model="post.title" placeholder="Add post..."></input>
          <br>
          <input type="text" ng-model="post.link" placeholder="Add link..."></input>
          <br>
          <button type="submit" class="large button">Post</button>
        </form>
        </div>
      </div>

      <div class="grid-block">
        <div id="contacts" class="small-12 medium-4 grid-content medium-order-2">
          <div ng-controller="PostsCtrl">

            <div class="page-header">
              <h3>
                <a ng-show="post.link" href="{{post.link}}">
                  {{post.title}}
                </a>
                <span ng-hide="post.link">
                  {{post.title}}
                </span>
              </h3>
            </div>

            <div ng-repeat="comment in post.comments | orderBy:'-upvotes'">
              <span class="glyphicon glyphicon-thumbs-up"
                ng-click="incrementUpvotes(comment)">+</span>
              {{comment.upvotes}} - by {{comment.author}}
              <span style="font-size:20px; margin-left:10px;">{{comment.body}}</span>
            </div>

            <form ng-submit="addComment()">
              <h3>Add a new comment</h3>

              <div class="form-group">
                <input type="text" class="form-control" placeholder="Comment" ng-model="body"></input>
              </div>
              <button type="submit" class="btn btn-primary">Post</button>
            </form>

          </div>
        </div>
      </div>

     </div>
   </div>
</div>

app.js

    (function() {
  'use strict';

  angular.module('chatter', [
    'ui.router',
    'ngAnimate',

    //foundation
    'foundation',
    'foundation.dynamicRouting',
    'foundation.dynamicRouting.animations'
  ])
    .factory('posts', [function(){
      var o = {
        posts: []
      };
      return o;
    }])
    .config(config)
    .run(run)

    // inject posts service into main controller
    .controller('MainCtrl', [
      '$scope', 'posts',
      function($scope, posts){
        // bind $scope.posts to posts array in factory
        $scope.posts = posts.posts;
        $scope.body = posts.body;
        $scope.test = 'Comments';

        $scope.addPost = function(post){
          if(!post.title || post.title === '') { return; } 
          if(!post.upvotes) { post.upvotes = 0 } 
          $scope.posts.push({
            title: post.title, 
            link: post.link,
            upvotes: post.upvotes,
            comments: post.comments,
            comments: [
              {author: 'Joe', body: 'Cool post!', upvotes: 0},
              {author: 'Todd', body: 'This is a crappy post!', upvotes: 2}
            ]
          });
          post.title = '';
          post.link = '';
        };
        $scope.incrementUpvotes = function(post) {
          post.upvotes += 1;
        };
    }])
    // Posts controller
    .controller('PostsCtrl', [
      '$scope',
      '$stateParams',
      'posts',
      function($scope, $stateParams, posts){
        $scope.post = posts.posts[$stateParams.id];
        $scope.posts.comments = posts.posts.comments;

        $scope.addComment = function(comment){
          if(!comment.body === '') { return; }
          $scope.comments.push({
            body: comment.body,
            author: 'user',
            upvotes: 0
          });
          comment.body = '';
        };
    }])

  config.$inject = ['$urlRouterProvider', '$locationProvider'];

  function config($urlProvider, $locationProvider) {
    $urlProvider.otherwise('/');

    $locationProvider.html5Mode({
      enabled:false,
      requireBase: false
    });

    $locationProvider.hashPrefix('!');
  }

  function run() {
    FastClick.attach(document.body);
  }

})();

Answer 1

您正在调用addComment而不传入变量作为第一个参数：

<form ng-submit="addComment()">

但是addComment函数需要一个参数：

$scope.addComment = function(comment){
    if(!comment.body === '') { return; }
            // ^^^^^ undefined because you didn't pass it in.

相反，您应该更改addComment以查看输入正在修改的范围内的数据。

更新模板输入，如下所示：

<input type="text" class="form-control" placeholder="Comment" ng-model="comment.body"></input>

然后看看范围：

$scope.comment = {};
$scope.addComment = function(){
    if(!this.comment.body === '') { return; }

无法让控制器发表评论 - AngularJS app

1 个答案: