i have form submit new message conversation list. want update list reflect changes without user having refresh browser.(*after refreshing page can see new msg , renders how want want ajaxify this)
$scope.sendmessage = function(){ console.log($scope.messages); message.savemessage($scope.newmsg,$stateparams.id) .then(function(data){ $scope.messages.push(data) ; }) } when logged messages $scope.messages '[]' guessing there behavior of $scope i'm not aware of.
here code
view layout (ui-view here)
%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 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} -# 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'} ng-repeat here
<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> ctrl & etc
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 ; } } }]) thank reading great! happy coding
Comments
Post a Comment