在angularjs的聊天框中滚动到底部

Question

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 http://plnkr.co/edit/NSwZFtmBYZuW7e2iAUq9

Here is my HTML: 这是我的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: 这是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;});
          });
        }
      }
    }]);

Answer 1

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). BTW：避免控制器内部的DOM操作（改为使用指令）。

Answer 2

Thanks @MajoB 谢谢@MajoB

Here are my 2 cents including: 这是我的2美分，包括：

removed jQuery dependency 删除了jQuery依赖项
added a $timeout to make sure $digest cycle is finished 添加$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);
        }
      });
    }
  }
}]);

在angularjs的聊天框中滚动到底部

问题描述

2 个解决方案

解决方案1
48 已采纳 2014-10-13 16:07:56

解决方案2
21 2015-09-09 14:50:44

在angularjs的聊天框中滚动到底部

问题描述

2 个解决方案

解决方案1 48 已采纳 2014-10-13 16:07:56

解决方案2 21 2015-09-09 14:50:44

解决方案1
48 已采纳 2014-10-13 16:07:56

解决方案2
21 2015-09-09 14:50:44