A visualização Angular.js não é atualizada quando a matriz de escopo $ aninhada é atualizada
Eu estou tentando fazer uma visão angular.js atualizar-se ao adicionar um comentário. Meu código é o seguinte:
<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>
o escopo é atualizado em entrar:
$('.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);
}
});
depuração $ scope.currentItem mostra que o comentário foi adicionado a ele, no entanto, a visão não mostra o novo comentário. Eu suspeito que o $ escopo só está sendo vigiado em seu primeiro nível e que é por isso que a visão não é atualizada. é esse o caso? Se sim, como posso consertar isso?
SOLUÇÃO: Como Ajay sugeriu em sua resposta abaixo, eu coloquei o array push na função apply assim:
var el=$(this);
$scope.$apply(function () {
$scope.currentChallenge.comments.push({
"user": $scope.currentUser,
"message": el.val()
});
});