滚动到底在angularjs聊天框 [英] Scroll to bottom in chat box in angularjs
本文介绍了滚动到底在angularjs聊天框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图自动滚动到底每当有新的消息。
我的code移动滚动条，但它并没有把它带到确切底部。请帮助。这是我plunker。
http://plnkr.co/edit/NSwZFtmBYZuW7e2iAUq9
下面是我的HTML：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;＆LT; HEAD＆GT;
＆所述;脚本数据需要=angular.js@1.3.0-beta.5数据semver =1.3.0-beta.5SRC =HTTPS：//$c$c.angularjs.org/1.3的3.0 beta.5 / angular.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;
＆所述; SCRIPT SRC =的script.js＆GT;＆下; /脚本＆GT;
＆LT; /头＆GT;＆LT;身体GT;
＆LT; DIV NG-应用=Sojharo＆GT;
＆LT; DIV NG控制器=myController的＆GT;
＆LT; DIV ID =客舱＆GT;
＆LT; DIV NG重复=消息在消息中＆GT;
＆LT; DIV CLASS =chatMessage＆GT;
＆LT; DIV CLASS =messageTextInMessage＆GT; {{message.msg}}＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =chatControls＆GT; ＆LT;形式NG提交=sendIM（IM）＆GT;
＆LT;输入类型=文本NG模型=im.msg占位符=发送消息类=chatTextField/＆GT;
＆LT; /表及GT;
类型和preSS进入
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;＆LT; / HTML＆GT;
下面是JavaScript的：
angular.module（'Sojharo'，[]）.controller（'myController的'，函数（$范围）{ $ scope.messages = [];
$ scope.im = {}; $ scope.sendIM =功能（MSG）{
$ scope.messages.push（MSG）;
$ scope.im = {}; VAR客舱=的document.getElementById（'客舱'）;
chatBox.scrollTop = 300 + 8 +（$ scope.messages.length * 240）;
}
}）;
请让我知道这个角度太。以下方法，我在互联网上发现，不工作：
下面是这些指令
.directive（myStream功能（）{
返回{
限制：'A'，
适用范围：{配置：'='}，
链接：功能（范围，元素，属性）{
//元素是什么元素这个指令是
getUserMedia（{视频：真正}，功能（流）{
的console.log（流）
element.src = URL.createObjectURL（流）;
//scope.config = {localvideo：element.src};
//scope.$apply（）; //有时这可能是不安全的。
}，功能（错误）{执行console.log（错误）}）;
}
}}）.directive（'ngFocus'，[功能（）{
VAR FOCUS_CLASS =NG-中心;
返回{
限制：'A'，
要求：'ngModel'，
链接：功能（范围，元素，ATTRS，CTRL）{
。CTRL $集中= FALSE;
element.bind（'专注'，函数（EVT）{
element.addClass（FOCUS_CLASS）;
。范围适用于$（函数（）{$ CTRL重点= TRUE;}）;
}）绑定（模糊处理，功能（EVT）{
element.removeClass（FOCUS_CLASS）;
。范围适用于$（函数（）{$ CTRL重点= FALSE;}）;
}）;
}
}
}]）;
解决方案
您可以为此创建一个指令：
.directive（'schrollBottom'，函数（）{
返回{
范围： {
schrollBottom：=
}，
链接：功能（范围，元素）{
范围。$ watchCollection（'schrollBottom'，函数（newValue）以{
如果（newValue）以
{
$（元件）.scrollTop（$（元件）[0] .scrollHeight）;
}
}）;
}
}
}）
<一个href=\"http://plnkr.co/edit/H6tFjw1590jHT28Uihcx?p=$p$pview\">http://plnkr.co/edit/H6tFjw1590jHT28Uihcx?p=$p$pview
BTW：避免内部控制器DOM操作（使用指令代替）
。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.
http://plnkr.co/edit/NSwZFtmBYZuW7e2iAUq9
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.3.0-beta.5" 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:
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;});
});
}
}
}]);
解决方案
You can create a directive for this:
.directive('schrollBottom', function () {
return {
scope: {
schrollBottom: "="
},
link: function (scope, element) {
scope.$watchCollection('schrollBottom', function (newValue) {
if (newValue)
{
$(element).scrollTop($(element)[0].scrollHeight);
}
});
}
}
})
http://plnkr.co/edit/H6tFjw1590jHT28Uihcx?p=preview
BTW: avoid DOM manipulation inside controllers (use directives instead).
这篇关于滚动到底在angularjs聊天框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
