當視圖更新時執行特定於視圖的javascript

Question

我一直在試圖找出當模型發生變化時如何執行一些特定於視圖的javascript代碼。在下面的例子中，每當你點擊「說」按鈕，一個新的條目將被添加到模型中，更新條目列表。樣式表將條目列表的高度限制爲大約五個條目。

什麼是正確的方式叫scrollLastChatEntryElementIntoView();？我知道如何將元素滾動到視圖中，但似乎無法找到任何有關如何以及何時應該更新視圖的信息。我應該在哪裏宣佈劇本，以及我應該什麼時候叫它？

<div class="chat"> 
    <ol class="entries"> 
     <li class="entry" ng-repeat="entry in chat.entries"> 
     <label>{{entry.sender}}</label> {{entry.text}} 
     </li> 
    </ol> 
    <form class="newEntry" ng-submit="chat.newEntry.submit()"> 
     <input class="text" ng-model="chat.newEntry.text" placeholder="Type to chat"/> 
     <span class="button submit" ng-click="chat.newEntry.submit()">Say</span> 
    </form> 
</div> 

Answer 1

我最近也有類似的情況，我做的方式是創建一個「自動翻頁」的指令被監聽列表元素上的「DOMSubtreeModified」事件並自動向下滾動，當一個新的元素被添加到它。

app.directive('autoScrolling', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 

      var el = angular.element(element); 

      scope.scrollDown = function(evt) { 
       // scroll down: 
       el.scrollTop(el.prop('scrollHeight')); 
      }; 

      scope.scrollDown(); 
      // each time the DOM element of the list changes, 
      // make sure we are scrolled all the way down... 
      element.bind('DOMSubtreeModified', scope.scrollDown); 
     } 
    }; 
}); 

，然後列表元素

<ol auto-scrolling>... 

plnkr demo here