Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I am trying to make an angular.js view update itself when adding a comment. My code is as follows:

<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>

the scope is updated on enter:

$('.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);
    }
});

debugging $scope.currentItem shows that the comment has been added to it, however the view doesn't show the new comment. I suspect that the $scope is only being watched on its first level and that this is why the view doesn't update. is that the case? If so how can I fix it?

SOLUTION: As Ajay suggested in his answer below I wrapped the array push into the apply function like this:

var el=$(this);
$scope.$apply(function () {
     $scope.currentChallenge.comments.push({
         "user": $scope.currentUser,
         "message": el.val()
     });
});
share|improve this question
check if the css applied for the new comment added is causing it to move away from the viewable screen – dreamweiver Apr 16 at 14:02
thanks for the suggestion, but this is not the case, I had a look at the html in firebug and the new comment clearly hasn't been added. – Dine Apr 16 at 14:05
but in your question you said while debugging u found that comment was added .what do you mean by that ? – dreamweiver Apr 16 at 14:06
1  
wrap the calling inside $scope.apply() then it will work – Ajay beniwal Apr 16 at 14:06
Thanks Ajay, I gave that a try and it works like a charm! Thanks so much! If you fancy putting that into an answer and explain it a bit I can accept your answer. – Dine Apr 16 at 14:12
show 1 more commentadd comment (requires an account with 50 reputation)

1 Answer

up vote 2 down vote accepted

Modify the code to wrap inside scope.$apply because you are modifying the property outside the angular scope you have to use scope.$apply() to watch the values

share|improve this answer
add comment (requires an account with 50 reputation)

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.