12

添加评论时，我正在尝试使 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 在下面的回答中建议的那样，我将数组 push 包装到 apply 函数中，如下所示：

var el=$(this);
$scope.$apply(function () {
     $scope.currentChallenge.comments.push({
         "user": $scope.currentUser,
         "message": el.val()
     });
});
4

4 回答 4

18

修改代码以包裹在 scope.$apply 内，因为您正在修改角度范围之外的属性，您必须使用scope.$apply()来观察值

于 2013-04-16T14:12:13.127 回答
0

使用 $scope.$parent.arrayObjet 来修改父变量而不是 $scope.arryaObject。它在我的情况下有效。

于 2014-12-25T13:40:47.103 回答
0

我必须将表单放在与 ng-repeat 相同的 div 控制器中。我有两个独立的 div 控制器。

于 2014-09-03T03:11:54.827 回答
0 
<div class="col-sm-12 col-lg-12">
            <div class="outer-container">
                <div class="inner-container">
                    <div class="table-header">
                        <form id="teamForm" name="teamForm">
                            <table class="table table-bordered">
                                <thead>

                                <!-- Grid header -->
                                <tbody data-ng-if="(allTeamMembers.length==0)">
                                    <tr>
                                        <td class="text-center height_33_p" colspan="15"> {{noResultFound}} </td>
                                    </tr>
                                </tbody>
                                <!-- Existing team member -->

                                <tbody data-ng-repeat="tm in teammemberDetailsArryobject|orderBy:orderByField:reverseSort" data-ng-form="innerForm_$index" data-ng-class="{'ng-submitted':innerForm_$index.$submitted}">
                                    <tr></tr>
                                    </tbody>

在代码中，我正在删除一条记录并以编程方式添加新行，但所有行都显示在 ng-repeat 行中（包括已删除）

于 2015-10-05T00:09:50.910 回答