Javascript 在angularjs的聊天框中滚动到底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26343832/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scroll to bottom in chat box in angularjs
提问by Sojharo Mangi
I am trying to automatically scroll to bottom whenever there is a new message.
每当有新消息时，我都会尝试自动滚动到底部。
My code moves the scrollbar but it does not take it to exact bottom. Kindly help. Here is my plunker.
我的代码移动滚动条，但它没有将它带到确切的底部。请帮忙。这是我的plunker。
http://plnkr.co/edit/NSwZFtmBYZuW7e2iAUq9
http://plnkr.co/edit/NSwZFtmBYZuW7e2iAUq9
Here is my HTML:
这是我的 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>
Here is javascript:
这是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);
}
});
Kindly let me know of angular way for this too. Following way, I found on Internet, does not work:
请让我知道这个角度的方式。以下方法，我在互联网上发现，不起作用：
Here are these 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;});
});
}
}
}]);
回答by Marian Ban
You can create a directive for this:
您可以为此创建一个指令：
.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
http://plnkr.co/edit/H6tFjw1590jHT28Uihcx?p=preview
BTW: avoid DOM manipulation inside controllers (use directives instead).
顺便说一句：避免在控制器内部进行 DOM 操作（改用指令）。
回答by Augustin Riedinger
Thanks @MajoB
谢谢@MajoB
Here are my 2 cents including:
这是我的 2 美分，包括：
- removed jQuery dependency
- added a
$timeoutto make sure$digestcycle is finished
- 移除 jQuery 依赖
- 添加了一个
$timeout以确保$digest循环完成
ngScrollBottom.js:
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);
}
});
}
}
}]);
