加载页面时,滚动条必须位于底部..这是My HtmlFiles
<div ng-controller="ConversationController as value">
<br>
<br>
<br>
<div class="col-lg-12">
<div class="main-box clearfix">
<header class="main-box-header clearfix">
<h2>Conversation...</h2>
</header>
<form id="scroll">
<div class="main-box-body clearfix">
<div class="conversation-wrapper"when-scrolled="more()"schroll-bottom="value"id="scrolled">
<div class="conversation-content">
<span ng-repeat="message in value">
<div class="conversation-item item-left clearfix"
ng-show="{{message.whoSendTheMessage.userId!=loggedUser}}">
<div class="conversation-user">
<img src="lib/app/img/user.jpg" style="width: 50px;" alt="">
</div>
<div class="conversation-body">
<div class="name">{{message.whoSendTheMessage.firstName}} {{message.whoSendTheMessage.lastName}}</div>
<div class="time hidden-xs">{{message.sendDate |
date:'yyyy-MM-dd HH:mm:ss '}}</div>
<div class="text">{{message.content}}</div>
</div>
</div>
<div class="conversation-item item-right clearfix"
ng-show="{{message.whoSendTheMessage.userId==loggedUser}}">
<div class="conversation-user">
<img src="lib/app/img/user.jpg" style="width: 50px;" alt="">
</div>
<div class="conversation-body">
<div class="name">{{message.whoSendTheMessage.firstName}} {{message.whoSendTheMessage.lastName}}</div>
<div class="time hidden-xs">{{message.sendDate |
date:'yyyy-MM-dd HH:mm:ss '}}</div>
<div class="text">{{message.content}}</div>
</div>
</div>
</span>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="conversation-new-message message-box">
<form>
<div class="form-group row">
<textarea class="form-control pull-left" rows="2" name="messagebox"
ng-model="message.content" placeholder="Enter your message..."></textarea>
<button type="submit" ng-click="saveMessage();"
class="btn btn-success fa fa-paper-plane message-button"></button>
</div>
<div class="clearfix"></div>
</form>
</div>
</div>
这是控制器页面..加载索引页面时,滚动条必须位于底部.....
define([ "angular", "app","atmosphere", "services/ajaxService", "services/userservice","services/context-service","services/atmosphere-service", "factory/atmosphere-factory" ],
function(angular, app, atmosphere) {
var conversationController = app.controller("ConversationController",
["$log","$scope","AjaxService","UserService","$window","ContextService","$timeout","AtmosphereService","AtmosphereFactory",
function($log, $scope, ajaxService, UserService, $window, contextService,$timeout,AtmosphereService,AtmosphereFactory) {
console.log("conversation controller");
var self = $scope;
self.pageNo = -1;
self.pageSize = 10;
self.isMore = true;
var url ="";
$scope.value= [];
var messageBelongTo=0;
self.message = {
"content" : "",
"complexContent" : {
"header" : "Sample",
"image" : "sample",
"metaData" : "image"
},
"contentType" : "TEXT",
"sendDate" : null,
"whenDeliveredInServer" : null,
"whoSendTheMessage" : {
"userId" : 0
},
"messageBelongTo" : {
"conversationId" : 0
}
};
self.loggedUser = contextService.userData.userId;
self.more = function() {
if (!self.isMore) {
return;
}
self.pageNo += 1;
console.log("Init conversation controller");
messageBelongTo=contextService.selectedConversationId;
var check=null;
if(contextService.backUrl=='inbox'){
check = contextService.getUrl("messagelist");
messageBelongTo=contextService.selectedConversationId;
check += "/" +messageBelongTo + '/' + self.pageNo + '/' + self.pageSize;
}
else{
check = contextService.getUrl("contactmessagelist");
console.log("userId",contextService.userData.userId);
console.log("contactId",contextService.selectedContact);
check +="/"+contextService.userData.userId+ '/' + self.pageNo + '/' + self.pageSize +"?contactId=" +contextService.selectedContact;
}
ajaxService.get({
url : check,
success : function(data) {
if( data.responseSuccess){
$log.log("Success!", angular.fromJson(data.result));
if($scope.value.length !=0){
messageBelongTo= $scope.value[0]['messageBelongTo']['conversationId'];
}
console.log('Conversatio n Id is'+messageBelongTo);
if (data.result.length === 0) {
self.isMore = false;
}
for (var i = 0; i < data.result.length; i++) {
$scope.value.push(data.result[i]);
}
if($scope.value.length !=0){
messageBelongTo= $scope.value[0]['messageBelongTo']['conversationId'];
}
console.log('Conversatio n Id is'+messageBelongTo);
$scope.$apply();
}
else if( data.responseError){
$scope.value = [];
}
$scope.isAjax = false;
$scope.$apply();
$timeout(function(){
//$("html, body").animate({ scrollTop: $(document).height() }, "fast");
//$("html, body").animate({ scrollTop: 150000 }, 2000);
//angular.element(".conversation-wrapper").scrollTop(angular.element(".conversation-wrapper")[0].scrollHeight);
},200);
},
error : function(data) {
$log.log("Error: ", data);
$scope.isAjax = false;
$scope.$apply();
}
});
};
self.more();
$scope.saveMessage = function() {
var WhoSendTheMessage = self.loggedUser;
self.message.whoSendTheMessage.userId=WhoSendTheMessage;
console.log("The use is",contextService.userData.firstName+contextService.userData.lastName);
console.log("The userId is",WhoSendTheMessage);
self.message.messageBelongTo.conversationId=messageBelongTo;
$scope.isAjax = true;
var url ="";
if($scope.value){
url= contextService.getUrl("sendmessage")+"?loggedUser="+contextService.userData.userId+"&contactSelected="+contextService.selectedContact;
}else{
url= contextService.getUrl("sendmessage")+"?loggedUser="+contextService.userData.userId+"&contactSelected="+contextService.selectedContact;
}
ajaxService.post({
url : url,
data : angular.toJson(self.message),
headers : {
"Content-Type" : "application/json;charset=utf-8"
},
success : function(data) {
console.log("check question",data);
console.log(JSON.stringify(data));
//clear Text box
$scope.value.push(data);
self.message.content="";
**$('.conversation-wrapper').scrollTop($('.conversation-wrapper').height());**
$scope.isAjax = false;
$scope.$apply();
},
error : function(data) {
$log.log("project creation error block: ",data);
$scope.isAjax = false;
$scope.$apply();
}
});
}
//Receive Message
$scope.$on('messagereceived',function(event,msg){
if (!("Notification" in $window)) {
console.log("called");
}
else if (Notification.permission === "granted") {
var options = {
body: self.message.content,
icon: "lib/app/img/user.jpg",
};
var notification = new Notification(contextService.userData.firstName+contextService.userData.lastName,options);
}
else if (Notification.permission !== 'denied') {
console.log("grantedsss");
Notification.requestPermission(function (permission) {
if (permission === "granted") {
var options = {
body: self.message.content,
icon: "lib/app/img/user.jpg",
};
var notification = new Notification(contextService.userData.firstName+contextService.userData.lastName,options);
}
});
}
$scope.value.push(msg.message);
$scope.isAjax = false;
$scope.$apply();
});
} ]);
return conversationController;
});
答案 0 :(得分:0)
将id添加到您的底层html元素
<div class="conversation-new-message message-box" id="my-bottom-element">
并在控制器中添加所有消息或其他数据时添加这些行。
$location.hash('my-bottom-element');
$anchorScroll();
请记住在控制器中包含$location
和$anchorScroll
个依赖项。