Question

我创建了这个虚假会话，当滚动到页面顶部时，它将加载最后20条消息以及接下来的20条消息或其余消息。出于某种原因，剩余的消息已成功添加到vm.messages数组中（我可以在控制台中看到），但是在稍后调用loadMoreMessages之后的任何时候都无法在屏幕上看到。

我完全不知道为什么会这样...我认为这可能是因为视图无法正确更新，但是当我创建函数vm.reply时，它可以动态添加更多消息。< / p>

我设法按预期加载了30到10条消息，但向上滚动后，前10条没有出现在屏幕上。

angular.module('app',['ui.bootstrap'])

.controller('mainCtrl', function($location, $anchorScroll, $document, $window) {
  var vm = this;
  vm.messagesInPart = 20; //number of messages in one part
  vm.messagesLoaded = 0;
  vm.conversation = [];
  vm.messages = [];
  
  $document.on('scroll', function() {
    if($window.scrollY === 0) {
       console.log('top of the page');
       loadMoreMessages();
    }
  });
  
  //fake conversation
  function getConversation() {
    for(var i = 1; i < 30; i++) {
      vm.conversation.push({
        side: 'left',
        badgeClass: 'info',
        badgeIconClass: 'glyphicon-comment',
        content: "My own message " + i,
        userName: ''
      });
    }
    
    scrollToTheReply();
  }
  
  getConversation();
  
  function loadMoreMessages() {
     vm.messagesLeftToLoad = vm.conversation.length - vm.messagesLoaded;

     if(vm.messagesLeftToLoad > 0) {
        var iterationsUpTo = vm.messagesLeftToLoad >= vm.messagesInPart ? vm.messagesLeftToLoad - vm.messagesInPart : 0;
       
        console.log('iterationsUpTo = ', iterationsUpTo);

        for(var i = vm.messagesLeftToLoad - 1; i >= iterationsUpTo; i--) {
          vm.messages.unshift({
             side: vm.conversation[i].side,
             badgeClass: vm.conversation[i].badgeClass,
             badgeIconClass: vm.conversation[i].badgeIconClass,
             userName: vm.conversation[i].userName,
             content: vm.conversation[i].content
          });

          vm.messagesLoaded++;
       }
       
       console.log('vm.messages = ', vm.messages);
     }
  }
  
  loadMoreMessages();
  
  function scrollToTheReply() {
	$location.hash('reply');
	$anchorScroll();
  }

  vm.reply = function() {
     vm.messages.push({
       side: 'left',
       badgeClass: 'info',
       badgeIconClass: 'glyphicon-comment',
       userName: '',
       content: 'Reply msg'
     });
  }
})

<html ng-app="app">
 <head>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/rpocklin/angular-timeline/dist/angular-timeline-bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/rpocklin/angular-timeline/dist/angular-timeline.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/rpocklin/angular-timeline/dist/angular-timeline.js"></script>
 </head>
 <body>
    <div ng-controller="mainCtrl as vm">
       <div style="float: left;">
          <timeline>
             <timeline-event ng-repeat="message in vm.messages" side="{{message.side}}">
                <timeline-badge class="{{message.badgeClass}}">
                   <i class="glyphicon {{message.badgeIconClass}}"></i>
                </timeline-badge>
                <timeline-panel class="{{message.badgeClass}}">
                   <timeline-heading>
                      <h4>{{message.userName}}</h4>
                   </timeline-heading>
                   <p>{{message.content}}</p>
                </timeline-panel>
              </timeline-event>
            </timeline>
         </div>
      <div style="margin-top:20px;">
        <button type="button" id="reply" ng-click="vm.reply()">Reply</button>
      </div>
    </div>
  </body>
 </html>

Answer 1

您不在摘要循环中。

在调用$scope.$apply();函数时使用$scope.digest();，$timeout();或loadMoreMessages();函数触发它。

示例：

$document.on('scroll', function() {
  if($window.scrollY === 0) {
     $timeout(function() {
      loadMoreMessages();
     });
  }
});

如果要使用$timeout，请不要忘记将它插入控制器。

推入数组不会更新视图

1 个答案: