Angular.js Ansicht wird nicht aktualisiert, wenn das geschachtelte $ scope-Array aktualisiert wird
Ich versuche, eine Aktualisierung der angle.js-Ansicht selbst vorzunehmen, wenn ein Kommentar hinzugefügt wird. Mein Code lautet wie folgt:
<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>
Der Gültigkeitsbereich wird aktualisiert, wenn Sie Folgendes eingeben:
$('.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);
}
});
Wenn Sie $ scope.currentItem debuggen, wird angezeigt, dass der Kommentar hinzugefügt wurde. In der Ansicht wird der neue Kommentar jedoch nicht angezeigt. Ich vermute, dass der $ -Bereich nur auf der ersten Ebene überwacht wird und aus diesem Grund die Ansicht nicht aktualisiert wird. ist das der fall Wenn ja, wie kann ich das beheben?
LÖSUNG: Wie Ajay in seiner Antwort unten vorgeschlagen hat, habe ich den Array-Push in die Apply-Funktion wie folgt eingebunden:
var el=$(this);
$scope.$apply(function () {
$scope.currentChallenge.comments.push({
"user": $scope.currentUser,
"message": el.val()
});
});