Question

我正在学习angularJS，而且我在尝试使用ng-repeat时遇到了问题。我知道模板和控制器正在加载，因为我做了一个console.log（self.post）测试，显示我希望来自demoSuggestions的单个帖子和模板加载我期望的comCtrl.post.title。但comCtrl.post.comments中的ng-repeat =＆＃39;注释并未显示任何内容。关于我做错了什么的任何想法？

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>

模块＆amp;配置

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

控制器＆amp;服务

.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

如果你看一下班级row的前两个div，你会注意到，第一个div附加了ng-controller（并显示了你的标题），第二个div没有连接控制器（并且什么都不显示）。

由于ng-repeat不是控制器行的子元素，因此无法在那里使用控制器。你可以解决这个问题，如果你将ng-controller向上移动一个元素，那么它将在你所有行的父元素上。

角度控制器加载但ng-repeat没有显示

1 个答案: