Faites défiler vers le bas dans la boîte de chat en angularjs
Je suis en train de faire défiler automatiquement en bas à chaque fois qu'il ya un nouveau message.
Mon code déplace la barre de défilement, mais il ne prend pas exactement en bas. Aide gentiment. Voici mon plunker.
http://plnkr.co/edit/NSwZFtmBYZuW7e2iAUq9
Voici mon code 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>
Ici est le 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);
}
});
Bien vouloir me faire savoir angulaire moyen pour cela aussi. Manière suivante, que j'ai trouvé sur Internet, ne fonctionne pas:
Voici ces directives
.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;});
});
}
}
}]);
Vous devez vous connecter pour publier un commentaire.
Vous pouvez créer une directive pour cela:
http://plnkr.co/edit/H6tFjw1590jHT28Uihcx?p=preview
BTW: éviter les manipulations du DOM, à l'intérieur de contrôleurs (utilisation des directives de la place).
Merci @MajoB
Ici sont mes 2 cents, y compris:
$timeout
pour s'assurer$digest
cycle est terminéngScrollBottom.js
:$element.scrollTop = $element[0].scrollHeight;
depuisscrollTop
n'est pas une fonction...angular.element
au lieu de DOM directement. Essayez d'exécuterangular.element(document).find('body').scrollTop
sur Angulaire à la page 🙂 .angular.element(document).find('body').scrollTop
=> undefined$element[0].scrollTop = $element[0].scrollHeight
remarque: [0] sur les deux côtés.