Angular 控制器加载但 ng-repeat 不显示

Question

我正在学习 angularJS，但我在尝试使用 ng-repeat.I 时遇到问题知道模板和控制器正在加载，因为我做了 console.log(self.post) 测试显示了我期望从 demoSuggestions 获得的单个 post，并且模板加载了我期望的 comCtrl.post.title。但是 comCtrl.post.comments 中的 ng-repeat='comment 没有显示任何内容。关于我做错了什么有什么想法吗？

HTML

<script type='text/ng-template' id='/suggestions.html'>
  <div class='row' ng-controller='commentsController as comCtrl'>
    <div class='col-xs-12'>
        <div class='commentTitle'>
            <h3 class='text-center'>{{comCtrl.post.title}}</h3>
        </div><!--End of commentTitle-->
    </div><!--End of col-->
  </div><!--End of row-->
  <div class='row' ng-repeat='comment in comCtrl.post.comments'>
      <div class='col-xs-12 col-sm-10 col-sm-offset-1'>
          <div class='commentContainer'>
              <div class='row'>
                  <div class='col-xs-3 col-sm-2 col-md-1'>
                      <div class='thumbsUp'>
                          <i class="fa fa-thumbs-up" ng-click='comCtrl.upVote($index)'></i>
                      <span>{{comment.upvotes}}</span>
                      </div><!--End of thumbsUp-->
                  </div><!--End of col-->
                  <div class='col-xs-9 col-sm-10 col-md-11'>
                      <div class='commentBody'>
                          <span>{{comment.body}}</span>
                      </div><!--End of commentBody-->
                  </div><!--End of col-->
              </div><!--End of row-->
          </div><!--End of commentContainer-->
      </div><!--End of col-->
  </div><!--End of row-->
  <div class='row'>
    <div class='col-xs-12'>
      <form id='comment' ng-submit="addComment()" style="margin-top: 50px">
        <h3> Submit Your Comment </h3>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Place comment here" ng-model="body"></input>
        </div><!--End of form-group-->
        <button type="submit" class="btn btn-danger">Suggest</button>
      </form>
    </div><!--End of col-->
  </div><!--End of row-->
</script>

模块和配置

var suggestionApp = angular.module('suggestionBox', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: '/home.html',
    })
    .when('/suggestion/:id',{
      templateUrl:'/suggestions.html'
    })
    .otherwise({
        redirectTo:'/'
    });
}]);

控制器和服务

.controller('commentsController',['$routeParams','suggestions', function($routeParams, suggestions){
    var self = this;
    var swap = 1;
    self.post = suggestions.posts[$routeParams.id];
    console.log(self.post)
    self.addComment = function() {
         self.post.comments.push({
             body:self.body,
             upvotes:0
         });
        };

    self.upVote=function(index){
    if(swap)
        {
            self.post.comments[index].upvotes += 1;
            $('.thumbsUp .fa').eq(index).css('color','red');
            swap=0;
        }
    else
        {
            self.post.comments[index].upvotes -= 1;
            $('.thumbsUp .fa').eq(index).css('color', 'black');
            swap=1;
        }

  };
}])
.factory('suggestions', [function(){
    var demoSuggestions = {
    posts: [
        {
            title: 'Term limits on congress',
            avatar:'https://upload.wikimedia.org/wikipedia/commons/7/7a/US_Navy_040521-N-9909C-006_Established_by_the_American_Battle_Monuments_Commission,_the_memorial_honors_all_military_veterans_of_World_War_II.jpg',
            upvotes: 15,
            comments: [
                {body:'love the idea',upvotes:0},
                {body:'let\'s make this happen', upvotes:0},
                      ]
        },
        {
            title: 'Every two years a popular vote on two issues that passes into law without Congress.',
            avatar:'https://upload.wikimedia.org/wikipedia/commons/3/3e/The_Marine_Corps_War_Memorial_in_Arlington,_Va.,_can_be_seen_prior_to_the_Sunset_Parade_June_4,_2013_130604-M-MM982-036.jpg',
            upvotes: 9,
            comments: [
                {body:'Only if the judicial branch still rules on its constitutionality.', upvotes:0},
                {body:'Do you really think people would come out to vote?', upvotes:0},
                {body:'I\'d be down for this',upvotes:0}
                      ]
        },
        {
            title: 'Create a biometric scanner for all those entering the country.',
            avatar:'https://upload.wikimedia.org/wikipedia/commons/e/ea/Washington_Monument_-_01.jpg',
            upvotes: 7,
            comments:[
                        {body:'Seriously, not cost effective', upvotes:0},
                    ],
        },
        {
            title: 'Become more isolationist and bring our troops back home.',
            avatar:'https://upload.wikimedia.org/wikipedia/commons/3/3b/Bunker_hill_2009.JPG',
            upvotes: 3,
            comments: [
                        {body:'sounds a little grim',upvotes:0}
                      ],
        }
    ]
};
    return demoSuggestions;
    }]);

Answer 1

如果您查看带有 class row 的前两个 div，您会注意到第一个 div 有一个 ng-controller连接（并显示您的标题），第二个没有连接控制器（并且不显示任何内容）。

由于您的 ng-repeat 不是您与控制器所在行的 child-element，因此您不能在那里使用控制器。你可以解决这个问题，如果你将 ng-controller 向上移动一个元素，这样它就会在所有行的 parent 上。

Angular 控制器加载但 ng-repeat 不显示

Angular controller loads but ng-repeat doesn't show

angularjs

ng-repeat