Angularjs: HTML DOM is not updated
Angularjs: HTML DOM is not updated
我有一个在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);
});
}
}
相关文章:
- jQuery is not loaded
- AngularJS JSON not arriving php
- $rootScope not working
- reactRedux is not defined
- jQuery document.ready not working
- Javascript/Jquery Blob not showing Chrome PDF
- ReferenceError: not defined
- ReferenceError: cordova is not defined @ng-cordova.min.js:7
- Javascript getElementsByTagName not working?
- jQuery's trim()的前缀为not运算符
- Javascript - element.childNodes does not see an append.newch
- SemanticUI模态not onDeny/onApprove事件未激发
- WebkitTransform not fluent
- JQuery.val( ) not working
- Tomcat websocket is not working
- :not选择器不适用于ul类-备选方案
- getElementById is not being updated
- Angularjs: HTML DOM is not updated
- ReactJs , DOM does not get updated
- ASPxTextBox ErrorText Not Updated on Lost Focus