在angularjs的聊天框中滚动到底部
每当出现新消息时，我都会尝试自动滚动到底部。
我的代码移动了滚动条，但并没有将其移到确切的底部。请帮助。这是我的朋克。
http://plnkr.co/edit/NSwZFtmBYZuW7e2iAUq9
这是我的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>
这是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);
}
});
请也让我知道有角度的方式。我在Internet上发现以下方法无效：
这些是这些指令
.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;});
});
}
}
}]);
问题答案：
您可以为此创建一个指令：
.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
顺便说一句：避免在控制器内部进行DOM操作（改用指令）。
-
问题内容： 我有一个AJAX聊天程序，将消息输出到div溢出：自动，所以如果它太长，则会出现滚动条。有没有办法让它在添加新消息时自动滚动到底部？最好使用jQuery？ 问题答案： 这将通过以下行完成 这是将滚动条设置为自己元素的高度 只需在每条新消息中都调用它即可：) 干杯
-
问题内容： 我正在使用Ajax请求创建聊天，并且试图使消息div滚动到底部没有太多运气。 我将所有内容包装在这个div中： 有没有一种方法可以使用JS将其默认滚动到底部？ 有没有一种方法可以在ajax请求后将其滚动到底部？ 问题答案： 这是我在网站上使用的内容：
-
如何在android应用程序中使用滑动滚动至底部？我试着用 但上述情况并没有起到任何作用。有人能给我推荐一些通用的解决方案吗？
-
问题内容： 我正在建立一个带有包含日志消息的文本框的网站。使用AJAX更新日志。 每次更新时，我需要向下滚动文本框。怎么样？ 问题答案： 处理Sys.WebForms.PageRequestManager.endRequest事件，并将文本框向下滚动：
-
问题内容： 我正在使用Rails中的Ajax请求创建聊天，并且试图使div滚动到底部没有太多运气。 我将所有内容包装在这个div中： 有没有一种方法可以使用JS将其默认滚动到底部？ 有没有办法在ajax请求之后将其滚动到底部？ 问题答案： 这是我在网站上使用的内容：
-
我正在使用AngularJS开发一个小型web应用程序，遇到了一个问题。我正在使用填充div内部的列表。div有一个固定的高度，并设置为，这意味着当列表对于div来说太大时会出现一个滚动条。我的问题是，当重新绘制列表时，即支持ng repeat的数据会发生变化，滚动条不会重置为div的顶部。相反，它会保持在ng repeat更改之前滚动条所在的任何位置。这是一个非常糟糕的用户体验。我尝试了以下方法