一尘不染

嵌套$ scope数组更新时,Angular.js视图不会更新

angularjs

添加评论时,我试图使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()
     });
});

阅读 297

收藏
2020-07-04

共1个答案

一尘不染

修改代码以将其包装在scope。$ apply内,因为要在角度范围之外修改属性,则必须使用scope。$
apply()
来监视值

2020-07-04