Cuộn xuống cuối trong hộp trò chuyện trong angularjs

Tôi đang cố gắng tự động cuộn xuống cuối mỗi khi có thư mới.Cuộn xuống cuối trong hộp trò chuyện trong angularjs

Mã của tôi di chuyển thanh cuộn nhưng nó không mang nó đến đáy chính xác. Giúp đỡ một cách tử tế. Đây là plunker của tôi.

http://plnkr.co/edit/NSwZFtmBYZuW7e2iAUq9

Đây là HTML của tôi:

<!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>

Đây là 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); 


    } 
});

Vui lòng cho tôi biết cách góc cạnh cho việc này quá. Sau bằng cách nào, tôi tìm thấy trên Internet, không hoạt động:

Dưới đây là những chỉ thị

.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;}); 
      }); 
     } 
     } 
    }]);

Nguồn

2014-10-13 Sojharo Mangi

Bạn có thể tạo một chỉ thị cho việc này:

.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: tránh Thao tác DOM bên trong bộ điều khiển (sử dụng chỉ thị thay thế).

Nguồn

2014-10-13 16:07:56

Cảm ơn @MajoB

Dưới đây là tôi 2 cent bao gồm:

loại bỏ sự phụ thuộc jQuery
thêm một $timeout để đảm bảo $digest chu kỳ kết thúc

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); 
     } 
     }); 
    } 
    } 
}]);

Nguồn

2015-09-09 14:50:44

Nó phải là '$ element.scrollTop = $ element [0] .scrollHeight;' vì 'scrollTop' không phải là hàm ... – bomba6

Đó là nếu bạn xử lý' angular.element' thay vì DOM trực tiếp. Hãy thử chạy 'angular.element (document) .find ('body'). ScrollTop' trên trang Angular :). –

Làm việc tuyệt vời! cảm ơn bạn! –

Cuộn xuống cuối trong hộp trò chuyện trong angularjs

Trả lời

Các vấn đề liên quan