Question

我一直试图找出在模型发生变化时如何执行某些特定于视图的javascript代码。在下面的示例中，每当您单击“Say”按钮时，都会向模型添加一个新条目，更新条目列表。样式表将entries-list的高度限制为大约五个条目。

调用类似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

我最近有类似的情况，我这样做是为了创建一个＆＃34;自动滚动＆＃34;正在聆听＆＃39; DOMSubtreeModified＆＃39; list元素上的event，并在添加新元素时自动向下滚动。

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

更新视图时执行特定于视图的javascript

1 个答案: