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;});
});
}
}
}]);
Dovrebbe essere '$ element.scrollTop = $ elemento [0] .scrollHeight;' poiché 'scrollTop' non è una funzione ... – bomba6
È se si gestisce direttamente' angular.element' invece di DOM. Prova a eseguire 'angular.element (document) .find ('body'). ScrollTop' su una pagina Angular :). –
Ottimo lavoro! grazie! –