2014-10-13 13 views
29

Sto provando a scorrere automaticamente verso il basso ogni volta che c'è un nuovo messaggio.Scorri verso il basso nella casella di chat in angularjs

Il mio codice sposta la barra di scorrimento ma non la porta in fondo esatto. Gentilmente aiuto. Ecco il mio plunker.

http://plnkr.co/edit/NSwZFtmBYZuW7e2iAUq9

Ecco il mio HTML:

<!DOCTYPE html> 
<html> 

<head> 
<script data-require="[email protected]" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script> 
<link rel="stylesheet" href="style.css" /> 
<script src="script.js"></script> 
</head> 

<body> 
<div ng-app="Sojharo"> 
    <div ng-controller="MyController"> 
    <div id="chatBox"> 
     <div ng-repeat="message in messages"> 
     <div class="chatMessage"> 
      <div class="messageTextInMessage">{{message.msg}}</div> 
     </div> 
     </div> 
    </div> 

    <div class="chatControls"> 

     <form ng-submit="sendIM(im)"> 
     <input type="text" ng-model="im.msg" placeholder="Send a message" class="chatTextField" /> 
     </form> 
     Type and press Enter 
    </div> 
    </div> 
</div> 
</body> 

</html> 

Ecco javascript:

angular.module('Sojharo', []) 

.controller('MyController', function($scope) { 

    $scope.messages = []; 
    $scope.im = {}; 

    $scope.sendIM = function(msg) { 


    $scope.messages.push(msg); 
    $scope.im = {}; 

    var chatBox = document.getElementById('chatBox'); 
    chatBox.scrollTop = 300 + 8 + ($scope.messages.length * 240); 


    } 
}); 

lasciato gentilmente sapere di passaggio angolare anche per questo. A seguito di strada, ho trovato su Internet, non funziona:

Qui ci sono queste direttive

.directive("myStream", function(){ 
    return {   
     restrict: 'A', 
     scope:{config:'='}, 
     link: function(scope, element, attributes){ 
     //Element is whatever element this "directive" is on 
     getUserMedia({video:true}, function (stream) { 
      console.log(stream) 
     element.src = URL.createObjectURL(stream); 
     //scope.config = {localvideo: element.src}; 
     //scope.$apply(); //sometimes this can be unsafe. 
     }, function(error){ console.log(error) }); 
     } 
    } 

}) 

.directive('ngFocus', [function() { 
     var FOCUS_CLASS = "ng-focused"; 
     return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, element, attrs, ctrl) { 
      ctrl.$focused = false; 
      element.bind('focus', function(evt) { 
      element.addClass(FOCUS_CLASS); 
      scope.$apply(function() {ctrl.$focused = true;}); 
      }).bind('blur', function(evt) { 
      element.removeClass(FOCUS_CLASS); 
      scope.$apply(function() {ctrl.$focused = false;}); 
      }); 
     } 
     } 
    }]); 

risposta

46

È possibile creare una direttiva per questo:

.directive('scrollBottom', function() { 
    return { 
    scope: { 
     scrollBottom: "=" 
    }, 
    link: function (scope, element) { 
     scope.$watchCollection('scrollBottom', function (newValue) { 
     if (newValue) 
     { 
      $(element).scrollTop($(element)[0].scrollHeight); 
     } 
     }); 
    } 
    } 
}) 

http://plnkr.co/edit/H6tFjw1590jHT28Uihcx?p=preview

BTW: evitare Manipolazione DOM all'interno dei controller (utilizzare invece le direttive).

21

Grazie @MajoB

Qui sono i miei 2 centesimi tra cui:

  • rimosso dipendenza jQuery
  • aggiunto un $timeout per assicurarsi che il ciclo è finito $digest

ngScrollBottom.js:

angular.module('myApp').directive('ngScrollBottom', ['$timeout', function ($timeout) { 
    return { 
    scope: { 
     ngScrollBottom: "=" 
    }, 
    link: function ($scope, $element) { 
     $scope.$watchCollection('ngScrollBottom', function (newValue) { 
     if (newValue) { 
      $timeout(function(){ 
      $element.scrollTop($element[0].scrollHeight); 
      }, 0); 
     } 
     }); 
    } 
    } 
}]); 
+4

Dovrebbe essere '$ element.scrollTop = $ elemento [0] .scrollHeight;' poiché 'scrollTop' non è una funzione ... – bomba6

+1

È se si gestisce direttamente' angular.element' invece di DOM. Prova a eseguire 'angular.element (document) .find ('body'). ScrollTop' su una pagina Angular :). –

+0

Ottimo lavoro! grazie! –

Problemi correlati