12

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()
     });
});
Dine
  • 7,223
  • 8
  • 25
  • 35
  • check if the css applied for the new comment added is causing it to move away from the viewable screen – dreamweiver Apr 16 '13 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 '13 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 '13 at 14:06
  • 3
    wrap the calling inside $scope.apply() then it will work – Ajay Beniwal Apr 16 '13 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 '13 at 14:12
  • dreamweiver, I meant that I debugged "$scope.currentItem" in the controller and the new message was in there after pressing enter, but it hadn't been added into the html view. – Dine Apr 16 '13 at 14:34
  • @dine when I do this :: $scope.$apply(function () { $scope.Images.push(data); }); "Error: [$rootScope:inprog] $digest already in progress" Is coming if i remove the apply() then same problem occurs as mention in the question. – Trilok Pathak Aug 27 '15 at 05:17

4 Answers4

18

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

Ajay Beniwal
  • 18,857
  • 9
  • 81
  • 99
  • when I do this :: $scope.$apply(function () { $scope.Images.push(data); }); "Error: [$rootScope:inprog] $digest already in progress" Is coming if i remove the apply() then same problem occurs as mention in the question. – Trilok Pathak Aug 27 '15 at 05:19
  • I think in your case it would be something like: $scope.Images.push(data); $scope.$apply(); ... – cbaigorri Jan 19 '16 at 20:28
0

I had to place my form inside the same div controller as the ng-repeat. I had two separate div controllers.

Natus Drew
  • 1,876
  • 1
  • 21
  • 23
0

Use $scope.$parent.arrayObjet to modify the parent variables instead of $scope.arryaObject. It worked in my case.

Anand H G
  • 21
  • 4
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>

In the code I am deleting one record and add new row programmatically but all the rows are displayed in the ng-repeat rows(including deleted)

tom
  • 1