директива angularjs для прокрутки вниз - PullRequest
Новая
       10

директива angularjs для прокрутки вниз

0 голосов
/ 11 октября 2018

Я хочу создать директиву для 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>

спасибо, поэтому

...