Question

我有一个由异步调用检索的项目列表，该列表在ng-repeat的帮助下显示。由于该列表的div容器具有固定高度（400px），我希望滚动条位于底部。为此，我需要scrollHeight。但scrollHeight中的postLink不是最终高度，而是初始高度。

实施例

ppChat.tpl.html

<!-- Height of "chatroom" is "400px" -->
<div class="chatroom">
  <!-- Height of "messages" after all messages have been loaded is "4468px" -->
  <div class="messages" ng-repeat="message in chat.messages">
    <chat-message data="message"></chat-message>
  </div>
</div>

ppChat.js

// [...]
compile: function(element) {
  element.addClass('pp-chat');

  return function(scope, element, attrs, PpChatController) {
    var messagesDiv;
    // My idea was to wait until the messages have been loaded...
    PpChatController.messages.$loaded(function() {
      // ...and then recompile the messages div container
      messagesDiv = $compile(element.children()[0])(scope);
      // Unfortunately this doesn't work. "messagesDiv[0].scrollHeight" still has its initial height of "400px"
    });
  }
}

有人可以解释我在这里错过的内容吗？

根据需要，它是plunk

Answer 1

您可以通过以下方式更新DOM后获取div的scrollHeight。

下面的指令在数组上设置监视，即集合，并使用$ timeout服务等待DOM更新，然后滚动到div的底部。

chatDirective.$inject = ['$timeout'];

function chatDirective($timeout) {
  return {
    require: 'chat',
    scope: {
      messages: '='
    },
    templateUrl: 'partials/chat.tpl.html',
    bindToController: true,
    controllerAs: 'chat',
    controller: ChatController,
    link: function(scope, element, attrs, ChatController) {
      scope.$watchCollection(function () {
        return scope.chat.messages;
      }, function (newValue, oldValue) {
        if (newValue.length) {
          $timeout(function () {
            var chatBox = document.getElementsByClassName('chat')[0];
            console.log(element.children(), chatBox.scrollHeight);
            chatBox.scrollTop = chatBox.scrollHeight;
          });
        }
      });
    }
  };
}

更新的plunker是here。

同样在您的控制器中，您已写为

  var Controller = this;

  this.messages = [];

最好以这种方式编写，这里vm代表ViewModel

AppController.$inject = ['$timeout'];

function AppController($timeout) {
  var vm = this;

  vm.messages = [];

  $timeout(
    function() {
      for (var i = 0; i < 100; i++) {
        vm.messages.push({
          message: getRandomString(),
          created: new Date()
        });
      }
    },
    3000
  );
}

如何获得异步html attribut

1 个答案: