指令angularjs向下滚动

时间:2018-10-11 16:01:43

标签: angularjs scroll using-directives

我想在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>

非常感谢

0 个答案:

没有答案