반응형
채팅 상자에서 아래로 스크롤(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);
}
});
이것도 각진 방법을 알려주세요.다음 방법으로 인터넷에 접속한 결과, 동작하지 않습니다.
여기 지시사항이 있습니다.
.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
BTW: 컨트롤러 내부에서 DOM 조작을 피합니다(대신 디렉티브 사용).
감사합니다 @MajoB
여기 내 2센트가 있습니다.
- jQuery 종속성을 제거했습니다.
- 추가했다
$timeout확실히 하다$digest사이클이 종료되었습니다.
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);
}
});
}
}
}]);
언급URL : https://stackoverflow.com/questions/26343832/scroll-to-bottom-in-chat-box-in-angularjs
반응형
'bestsource' 카테고리의 다른 글
| 각도 UI 대 각도 스트랩 (0) | 2023.03.20 |
|---|---|
| Angular.module 최소 버그 (0) | 2023.03.15 |
| React.Component vs React.createClass (0) | 2023.03.15 |
| 실행 방법c#을 사용한SQL 스크립트파일 (0) | 2023.03.15 |
| Google 앱 스크립트를 사용하여 워드프레스 관리 페이지를 가져오려면 어떻게 해야 합니까? (0) | 2023.03.15 |