Angularjs: HTML DOM is not updated

Angularjs: HTML DOM is not updated

本文关键字:not updated is DOM HTML Angularjs      更新时间:2023-09-26

我有一个在django 1.4中编写的继承项目,我没有时间将其更新到django的另一个版本。

作为一个新手,我将在该项目中介绍angularjs。

因此,我有一个HTML,里面充满了来自数据库的数据(非常简化的代码):

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

以及angularjs应用程序(简化),用注释填充表格:

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"};
        .......
            };
    });

这工作得很好,它建立了所有的评论好,很好。

现在我有一个文本框来添加新的评论,并希望通过ajax将新的评论发送到db,并使用响应json在html中的评论顶部添加一个新的评论。

我已经尝试将angularjs代码修改为:

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);
            }
       }    

所以我运行了这个程序,收到了两个警报,一个说"添加元素n",另一个说是"添加元素n+1",所以它似乎到达了$scope.comment_callback并将数据推送到数组,但DOM没有更新,我在页面中看不到插入的注释。

我一定是出了什么问题,但找不到什么。。。

我看到了来自ajax的响应,它是相同类型的JSON,但没有$$haskey键。

PD:从ajax服务接收的数据是:

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

当加载该评论的页面时(并且在页面中显示得很好)获得的是:

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

您必须将comment_callback的内容包装在$scope.$apply方法中,以在异步回调中通知$scope的更改:

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