Angularjs: HTML DOM is not updated

Question

I've an inherited project writed in django 1.4 and I've no time to update it to another version of django.

I'm introducing angularjs in that project being newbie with it.

So, I've a HTML filled with data from the database (very simplified code):

<div ng-app="myApp" ng-controller="commentController">
 <input placeholder="say something!" type="text">
 <button class="btn" ng-click="sendComment()" >
 <li ng-repeat="comment in comments" id="aportacion{{comment.pk}}">
          {{comment.username}} - {{comment.text}}
 </li>
</div>

And angularjs app (simplified) to fill the table with comments:

var app = angular.module("myApp", []); 
    app.controller("commentController",function ($scope) {
        $scope.comments = [];
        // this is generated dinamically with django from db data on page generation;
        $scope.comments[$scope.comments.length] = {"username":"inigod", "text":"this is sparta"};
        $scope.comments[$scope.comments.length] = {"username":"another guy", "text":"this is NOT sparta"};
        .......
            };
    });

This works great, it builds all the comments ok, nice.

Now I've a textbox to add new comment and want to send via ajax the new comment to db and with the response json add a new comment in the top of the comments in html.

I've tried modificating the angularjs code to this:

app.controller("commentController",function ($scope) {
    $scope.comments = [];
            // this is generated dinamically with django from db data on page generation;
    $scope.comments[$scope.comments] = {"username":"inigod", "text":"this is sparta"};
    $scope.comments[$scope.comments] = {"username":"another guy", "text":"this is NOT sparta"};
    $scope.sendComment = function(){
            Dajaxice.kolokvoweb.post_comment($scope.comment_callback, {'thread':'{{thread.pk}}',
                'type': 0, 
                'text': $('#comment').val(),
                });
        }
    $scope.comment_callback = function (data){
            if (data.result){
                data["image"]= "/img/comment-placeholder.png";
                //data["$$hashKey"] = "003";
                alert("adding element" +$scope.aportaciones.length);
                $scope.comments.push(data);   
                alert("added element" +$scope.aportaciones.length);

            }
       }

So I run this and I get two alert, one saying "adding element n" and the next "added element n+1" so it appears to reach to $scope.comment_callback an push the data to the array but the DOM is not updated and I cannot see the inserted comment in the page.

I must be something wrong but cannot find what...

I've see the response from ajax and is the same kind of JSON but withouth the $$haskey key.

PD: received data from the ajax service is:

{"username":"inigo","texto":"ggggggggggggggggggggggg","date":"now","result":true,"pk":74,"foto":"/img/agora-placeholder.png"}

The one getted when loading page for that comment (and which is well shown in the page) is:

{"pk":"74","texto":"ggggggggggggggggggggggg","username":"inigo","date":"10/11/14","foto":"/img/agora-placeholder.png"}

Have you checked data has the correct value? if an undefined or null value is inserted in comments, the array length will be increased but nothing will be shown — Pablo Lozano
– Pablo Lozano, Commented Nov 10, 2014 at 11:59

boindiil · Accepted Answer · 2014-11-10 12:28:01Z

1

You have to wrap the content of comment_callback in a $scope.$apply method to notify about $scope changes within async callbacks:

$scope.comment_callback = function (data){
    if (data.result){
        $scope.$apply(function() {
            data["image"]= "/img/comment-placeholder.png";
            $scope.comments.push(data);   
        });
    }
}

edited Nov 10, 2014 at 12:28

answered Nov 10, 2014 at 12:01

boindiil

5,8652 gold badges31 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs: HTML DOM is not updated

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related