我有一个表单可以向对话列表提交新邮件。 我想更新列表以反映更改，而无需用户刷新浏览器。（*刷新页面后，我可以看到新的msg，它呈现的方式就像我想要的那样，但我想要Ajaxify这个）
$scope.sendMessage = function(){
console.log($scope.messages);
Message.saveMessage($scope.newMsg,$stateParams.id)
.then(function(data){
$scope.messages.push(data) ;
})
}
当我记录消息时，$ scope.messages是＆＃39; []＆＃39; 所以我猜我有一个我不知道的范围的行为。
这是我的代码
%body#conversations-index{'ng-app' => 'convoWidget', 'ng-cloak'=>'true'}
%main{'ng-controller' => 'convoCtrl'}
=render file: 'layouts/navbar'
%div.container
%div.all-content
%div.row
-# start of tabs on the left side
%div{class: 'col s4'}
%div.collection.convo-tab-container
%a.collection-item.avatar{'ui-sref'=>'show({id: \'{{convo._id.$oid}}\'})','ng-repeat'=>'convo in convos'}
%img.circle{'ng-src'=>'{{otherUserPic(convo)}}'}
%span
{{ otherUserName(convo) }}
%p
{{ lastMsgPreview(convo) }}
%p
{{ lastMsgCreatedDate(convo) | date: 'MMM d, y hh:mm'}}
-# start of view messages area
%div{class: 'col s8 msg-container'}
%div.msg-show-container{'autoscroll'=>true,'scroll'=>'messages'}
%div{'ui-view' => true,'autoscroll'=>true}
-# where you create new messages
%div.new-msg-container
%form
%div{class: 'col s9 textbox'}
%textarea{'ng-model'=>'newMsg'}
%div{class: 'col s3 btnbox'}
%input.btn.btn-large{'ng-click'=>'sendMessage()','type'=>'submit','value'=>'reply'}
<ul class='collection' ng-init='getClickedConvo();scrollBottom()'>
<li class='collection-item avatar' ng-repeat='message in messages' ng-switch="$last">
<div class="row">
<div class="msg-profile col s8 valign-wrapper">
<img ng-src="{{ creatorPic(message) }}" class="circle valign" />
<span class="valign">
{{ creatorName(message) }}
</span>
</div>
<div class="col s4">
<span>{{ msgCreatedDate(message) | date: 'MMM d, y hh:mm' }}</span>
</div>
</div>
<div class="row msg-body">
<p>
{{ message.body }}
</p>
</div>
<div ng-switch-when="true" id='bottom'> </div>
</li>
</ul>
convoWidget.controller('convoCtrl',['$scope','$http','Conversation','$stateParams','Message','$location','$anchorScroll',function($scope,$http,Conversation,$stateParams,Message,$location,$anchorScroll){
$scope.currentUserId
$scope.convos = [] ;
$scope.messages = [] ;
$scope.defaultPicUrl = 'http://i.imgur.com/P25qqYM.png'
$scope.scrollBottom = function(){
var sheight = $('.msg-show-container')[0].scrollHeight ;
$('.msg-show-container').scrollTop(sheight) ;
$( '.msg-show-container').animate({
scrollTop: sheight
}, 500);
}
$scope.getClickedConvo = function(){
var convoId, promise ;
convoId = $stateParams.id ;
Conversation.getConvo(convoId)
.then(function(data){
$scope.messages = data;
})
}
$scope.sendMessage = function(){
console.log($scope.messages);
Message.saveMessage($scope.newMsg,$stateParams.id)
.then(function(data){
$scope.messages.push(data) ;
})
}
// =====================================
$scope.otherUserName = function(convo){
var other, fullName ;
if(convo.author_id.$oid === $scope.currentUserId){
other = convo.recipient
}else if(convo.recipient_id.$oid === $scope.currentUserId){
other = convo.author
}
fullName = other.firstname + ' ' + other.lastname ;
if(fullName.trim().length == 0){
return 'Anonymous User'
}
return fullName ;
}
$scope.otherUserPic = function(convo){
var picUrl ;
if(convo.author_id.$oid === $scope.currentUserId){
if(picUrl = convo.recipient.profile.avatar.small.url){
return picUrl
}else{
return $scope.defaultPicUrl
}
}else if(convo.recipient_id.$oid === $scope.currentUserId){
if(picUrl = convo.author.profile.avatar.small.url){
return picUrl
}else{
return $scope.defaultPicUrl
}
}
}
$scope.lastMsgPreview = function(convo){
var content, limit = 30 ;
content = convo.messages[convo.messages.length - 1].body
if(content.length > limit){
return content.slice(0,limit-1) + ' ' + '...' ;
}
return content ;
}
$scope.lastMsgCreatedDate = function(convo){
var msg = convo.messages[convo.messages.length - 1]
return new Date(Date.parse(msg.created_at));
}
$scope.creatorPic = function(msg){
var picUrl ;
picUrl = msg.creator.profile.avatar.small.url;
if(picUrl){
return picUrl ;
}else{
return $scope.defaultPicUrl ;
}
}
$scope.msgCreatedDate = function(msg){
return new Date(Date.parse(msg.created_at));
}
$scope.creatorName = function(msg){
var creator, creatorId, creatorFullName
creator = msg.creator;
creatorId = creator._id.$oid;
creatorFullName = creator.firstname + ' ' + creator.lastname;
if(creatorId === $scope.currentUserId){
return 'Me' ;
}else{
var fullName = creatorFullName.trim.length == 0 ? 'Anonymous User' : creatorFullName ;
return fullName ;
}
}
$scope.msgContent = function(msg){
return msg.body
}
$scope.refresh = function(){
Conversation.getLatestConvos()
.then(function(data){
$scope.convos = data.conversations ;
$scope.currentUserId = data.current_user ;
})
}
$scope.refresh();
}])
convoWidget.directive('convoTab',function(){
return {
restrict: 'E',
templateUrl: 'convo-tab.html',
replace: true,
scope: {
convoObj: '=',
convoId: '=',
otherUserName: '&',
otherUserPic: "&",
lastMsgPreview: '&',
lastMsgCreatedDate: '&'
}
}
})
convoWidget.directive('msg',function(){
return {
restrict: 'E',
templateUrl: 'msg.html',
replace: true,
scope: {
creatorPic: '&',
msgObj: '=',
msgCreatedDate: '&',
dateFormat: '@',
creatorName: '&',
msgContent: '&'
}
}
})
convoWidget.directive('scroll', function($timeout) {
return {
restrict: 'A',
link: function(scope, element, attr) {
scope.$watchCollection(attr.scroll, function(newVal) {
$timeout(function() {
element[0].scrollTop = element[0].scrollHeight;
});
});
}
}
});
convoWidget.factory('Message',['$http','$q',function($http,$q){
return {
saveMessage: function(body,conversationId){
var deferred = $q.defer();
$http({
method:'POST',
url:'/conversations/' + conversationId + '/messages',
data: JSON.stringify({conversation_id: conversationId, message:{body: body}} ),
headers:{'Content-Type': 'application/json'}
})
.success(function(data,st,headers,config){
deferred.resolve(data);
})
return deferred.promise ;
}
}
}])
感谢您的阅读 任何帮助都会很棒！ 快乐的编码