Przewiń do dołu w oknie czatu w angularjs

Próbuję automatycznie przewinąć do dołu, gdy pojawi się nowa wiadomość.Przewiń do dołu w oknie czatu w angularjs

Mój kod przesuwa pasek przewijania, ale nie zajmuje on dokładnego dołu. Uprzejma pomoc. Oto mój plunker.

http://plnkr.co/edit/NSwZFtmBYZuW7e2iAUq9

Tu jest mój 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>

Oto 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); 


    } 
});

Prosimy daj mi znać kątowego sposób na to zbyt. Następujący sposób znalazłem na internecie, nie działa:

Oto dyrektywy te

.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;}); 
      }); 
     } 
     } 
    }]);

Źródło

2014-10-13 Sojharo Mangi

można utworzyć dyrektywy do tego:

.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: unikać Manipulowanie DOM wewnątrz kontrolerów (zamiast tego użyj dyrektyw).

Źródło

2014-10-13 16:07:56

Dzięki @MajoB

Oto moje 2 centy w tym:

usunięta zależność jQuery
dodał $timeout aby upewnić $digest cykl zakończy

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); 
     } 
     }); 
    } 
    } 
}]);

Źródło

2015-09-09 14:50:44

Powinien to być '$ element.scrollTop = $ element [0] .scrollHeight;' ponieważ 'scrollTop' nie jest funkcją ... – bomba6

Jest tak, jeśli posługujesz się' angle.element' zamiast DOM bezpośrednio. Spróbuj uruchomić 'kątowy.element (document) .find ('body'). ScrollTop' na stronie kątowej :). –

Działaj świetnie! Dziękuję Ci! –

Przewiń do dołu w oknie czatu w angularjs

Odpowiedz

Powiązane problemy