我一直在尝试找出如何在模型更改时执行一些特定于 View 的 JavaScript 代码。在下面的示例中,每当您单击“说”按钮时,都会将一个新条目添加到模型中,从而更新条目列表。样式表将条目列表的高度限制为大约五个条目。
调用诸如 scrollLastChatEntryElementIntoView();
之类的正确方法是什么?我知道如何将元素滚动到 View 中,但我似乎找不到任何有关如何以及何时执行此操作以响应更新 View 的信息?我应该在哪里声明脚本,什么时候调用它?
<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>
最佳答案
我最近遇到了类似的情况,我的方法是创建一个“自动滚动”指令,该指令正在监听列表元素上的“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>...
关于html - 更新 View 时执行特定于 View 的 javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15500989/