我想在angularjs上创建一个指令,我正在使用v 1.6.6是一个应用聊天,我已经同意了并正在工作
// *=======DIRECTIVE TO SCROLL TO BOTTOM========*
angular.module('sls-app').directive('chatScroll', function () {
return {
scope: {
chatScroll: "=",
autoScrollDown: '='
},
link: function(scope, element) {
scope.$watchCollection('chatScroll', function(newValue) {
if (newValue && !scope.autoScrollDown) {
setTimeout(function() {
$(element).animate({
scrollTop: ($(element)[0].scrollHeight)
}, 200);
}, 300);
}
});
}
};
});
此功能在我键入时向下滚动,但是当我返回到任何单个聊天时,我看到的问题是滚动自身向下滚动,这是在此指令上创建或添加某些内容的方式,以便始终保持在按钮上滚动,这样我就无法避免该行为
这是我的html
<!-- LOAD PREVIOUS BUTTON -->
<div style="text-align: center">
<button ng-click="chatCtrl.loadMore()"
ng-if="loadPrevious && chat.messages.length >= 150"
class="btn" style="margin: 5px 0 0;font-size: 0.85em"
ng-disabled="loadingPrevious">
{{loadingPrevious?'Loading...':'Load previous'}}
</button>
</div>
<!-- MESSAGE LIST -->
<ul id="chatbox">
<!-- MESSAGE -->
<span ng-repeat="singleMessage in chat.messages | orderBy: 'messageid' track by $index"
ng-init="sentbyParsed=parJson(singleMessage.sentby); yesOrNo = singleMessage.isNew"
ng-attr-id="{{'chatFeed_' + singleMessage.chatid}}">
<!-- ME -->
<li ng-if="sentbyParsed.id === chat.user.id" class="msgThread group currentUser">
<div class="msgBalloon group">
<div class="msgHeader">
<div class="msgFull">{{ singleMessage.message }}</div>
</div>
</div>
<div class="msgDate">
{{ singleMessage.createdOn | date:'short'}}
<img ng-if="!showSent" src="/_CDN/lib/messenger/css/delivered.png" style="height: 12px">
</div>
</li>
<!-- RECIPIENT -->
<li ng-if="sentbyParsed.id !== chat.user.id"
class="msgThread group" ng-class="{newMsg: yesOrNo && $last}">
<div class="msgAuthor" style="background: #fff url('https://swinglifestyle.com/s1sp1cture5a/{{chat.recipient.picture}}') 50%;background-size: cover;">
<a ng-href="">
<span></span>
</a>
</div>
<div class="msgBalloon group">
<div class="msgHeader">
<div ng-if="sentbyParsed.name != ''" class="msgFrom">{{ sentbyParsed.name}}</div>
<div class="msgFull">{{ singleMessage.message }}</div>
</div>
</div>
<div class="msgFrom">{{ sentbyParsed.name}}</div>
<div class="msgDate">{{ singleMessage.createdOn | date:'short'}}</div>
</li>
</span>
</ul>
</div>
非常感谢