添加评论时,我试图使angular.js视图本身进行更新。我的代码如下:
<div class="comment clearfix" data-ng-repeat="comment in currentItem.comments" data-ng-class="{bubble: $first}" data-ng-instant> <div> <p> <span class="username">{{comment.user}}</span> {{comment.message}} </p> <p class="time"> 10 minutes ago </p> </div> </div> <div class="comment reply"> <div class="row-fluid"> <div class="span1"> <img src="assets/img/samples/user2.jpg" alt="user2" /> </div> <div class="span11"> <textarea class="input-block-level addComment" type="text" placeholder="Reply…"></textarea> </div> </div> </div>
范围在输入时更新:
$('.addComment').keypress(function(e) { if(e.which == 10 || e.which == 13) { $scope.currentItem.comments.push({ "user": "user3", "message": $(this).val() }); console.debug("currentItem", $scope.currentItem); } });
调试$ scope.currentItem显示注释已添加到其中,但是视图未显示新注释。我怀疑$ scope仅在其第一级被监视,这就是为什么视图不更新的原因。是这样吗?如果可以,我该如何解决?
解决方案:正如Ajay在下面的回答中所建议的那样,我将数组推入包装为apply函数,如下所示:
var el=$(this); $scope.$apply(function () { $scope.currentChallenge.comments.push({ "user": $scope.currentUser, "message": el.val() }); });
修改代码以将其包装在scope。$ apply内,因为要在角度范围之外修改属性,则必须使用scope。$ apply()来监视值