2015-09-04 73 views
0

當加載頁面滾動條必須是在底部。這是我的HtmlFiles如何修復滾動條總是在一個div的底部.....?

<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}}&nbsp;{{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}}&nbsp;{{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

給ID到您的底部HTML元素像這樣

<div class="conversation-new-message message-box" id="my-bottom-element"> 

和控制器添加這些行,當你所有的郵件或其他數據具有b個een加載。

$location.hash('my-bottom-element'); 
$anchorScroll(); 

記住,包括在你的控制器$location$anchorScroll依賴。

+0

mudasser ajaz:謝謝..但itss不工作 – Geetha

+0

@Geetha你在哪裏叫這些行? –

+0

mudasser ajaz謝謝你的答覆..在這裏,我已附加這些行..但它不是workajaxService.get({url:檢查,成功:函數(數據){$ location.hash('我的底部元素')) ; $ anchorScroll();如果(data.responseSuccess){$ log.log( 「成功!」,angular.fromJson(data.result)); \t \t \t \t \t \t \t \t如果($ scope.value.length != 0){ \t \t \t \t \t \t \t \t \t messageBelongTo = $ scope.value [0] [ 'messageBelongTo'] [ '的conversationId']; \t \t \t \t \t \t \t \t} – Geetha