AngularJs - 窗口提示显示为向下滚动

时间:2018-03-22 07:18:54

标签: javascript angularjs api

我面临一个奇怪的问题。我在我的html中应用了锚点滚动,它在滚动时加载数据。它工作正常,除非我到offset180。当我到达它时,网络中会出现类似url/x的呼叫,并出现提示框并要求输入,它会出现两次。请参阅屏幕截图以获得更多说明。

我有一个简单的代码。这是我的控制器。

    var aosListing = this;
        aosListing.page = 0;
        aosListing.limit = 20;
        aosListing.aosUsers = [];
        aosListing.changeAOSPermission = changeAOSPermission;
        aosListing.loadMoreData = loadMoreData;
        aosListing.paused = paused;
        aosListing.loadingData = true;

        function getAOSUserListing() {
            aosListing.loadingData = true;
            var offset = aosListing.page * aosListing.limit;
            aosListing.page++;
            TSSServices.getAOSListing(offset, aosListing.limit).then(function (res) {
                if (res.msgCode === "405") {
                    angular.forEach(res.data, function (aosUser) {
                        if (aosUser.website === "null") {
                            aosUser.website = "Not Available";
                        }
                        aosUser.showhistoryPopover = false;
                        aosListing.aosUsers.push(aosUser);
                    });
                    if (res.data.length > 0) {
                        aosListing.loadingData = false;
                    }
                }
            });
        }

        getAOSUserListing();

        function paused() {
            return aosListing.loadingData;
        }

        function loadMoreData() {
            getAOSUserListing();
        }

我的HTML

<div class="table-responsive tss_content_wrape" infinite-scroll='aosListing.loadMoreData()'
 infinite-scroll-disabled='aosListing.paused()' infinite-scroll-distance='0'>
<table id="tsstable" class="table table-striped" col-resizeable>
    <tr class="head_tr" sticky-class="sticky-table-header" offset="43" sticky>

        <th style="padding-left:12px !important;" class="role1"><span>Full Name</span></th>
        <th style="padding-left:12px !important;" class="board"><span>Email</span></th>
        <th style="padding-left:12px !important;" class="sent"><span>Website</span></th>
        <th style="padding-left:12px !important;" class="artist"><span>Institution</span></th>
        <th style="padding-left:12px !important;" class="sent"><span>Access?</span></th>
    </tr>
    <tr class="" ng-repeat="aos in aosListing.aosUsers">
        <td>
            <ul class="tss_inner_data">
                <li>
                    <div class="overflow" ng-bind-html="aos.userName | decodeEntities"></div>
                </li>
            </ul>
        </td>
        <td>
            <ul class="tss_inner_data tss_pop2">
                <li class="second_child">
                    <div class="overflow">{{aos.userEmail}}</div>
                </li>
            </ul>
        </td>
        <td>
            <ul class="tss_inner_data tss_pop2">
                <li class="second_child">
                    <div class="overflow">{{aos.website}}</div>
                </li>
            </ul>
        </td>
        <td style="padding-left:12px !important; ">
            <ul class="tss_inner_data">
                <li class="second_child">
                    <div class="overflow" ng-bind-html="aos.institutionName | decodeEntities"></div>
                </li>
            </ul>
        </td>
        <td>
            <ul class="tss_inner_data tss_pop3 no_fixed_table">
                <li class="status_li">
                    <a class="neg" ng-if="aos.access ===1"
                       ng-click="aosListing.changeAOSPermission(aos,'revoked')">
                        <span class="dot dot_red"></span>
                        <span class="aligned_width" style=" max-width: 110px; width: 110px;">Revoke Access</span>
                    </a>
                    <a class="neg" ng-if="aos.access ===0" ng-click="aosListing.changeAOSPermission(aos,'grant')">
                        <span class="dot dot_green"></span>
                        <span class="aligned_width" style=" max-width: 110px; width: 110px;">Grant Access</span>
                    </a>
                    <a style="color: black; margin-left: 15px;" popover-placement="bottom"
                       ng-click="aosListing.getOrgHistory(aos)"
                       uib-popover-template="'editHistoryPopup.html'" popover-trigger="outsideClick"
                       popover-is-open="org.showhistoryPopover">
                        <span aria-hidden="true" class="glyphicon glyphicon-time"></span></a>

                    <a ng-if="aos.access ===0" popover-placement="left"
                       uib-popover-template="'deleteAosPopup.html'" popover-trigger="outsideClick"
                       popover-is-open="org.showhistoryPopover">
                        <span aria-hidden="true" class="glyphicon glyphicon-trash"></span></a>
                </li>
                <script type="text/ng-template" id="editHistoryPopup.html">
                    <div>
                        <div class="activity_header">
                            <div class="activity_header_left">AOS Access History</div>
                        </div>
                        <ul class="activity_content activity_content_ history">
                            <li ng-if="aosListing.aosHistory.length==0" class="history_item"><span
                                    class="auto-width"><h2> {{aosListing.historyStatus}}</h2></span></li>
                            <li ng-repeat="history in aosListing.aosHistory" class="history_item">
                                <span class="auto-width">
                                    <h2>{{history.message}}</h2>
                                    <p>{{history.createdAt | dateFormat}} ago</p>
                                </span>
                            </li>
                        </ul>
                    </div>
                </script>
                <script type="text/ng-template" id="deleteAosPopup.html">
                    <div>
                        <div class="activity_header">
                            <div class="activity_header_left">Are you sure? This action can't be undone.</div>
                        </div>

                        <ul class="activity_content activity_content_ history aos_delete_button_align">
                            <li style="display: inline-block; float: left;  width: 50% !important; border-bottom:0px" class="aos_delete_buttons_indi">
                            <button class="aosDelButton" ng-click="aosListing.deleteAOS(aos)" >Delete</button>
                            </li>
                            <li style="display: inline-block; width: 50% !important; border-bottom:0px" class="aos_delete_buttons_indi">
                                <button class="aosDelButton" ng-click="org.showhistoryPopover = false;">Cancel</button>
                            </li>
                        </ul>
                    </div>
                </script>
            </ul>
        </td>
    </tr>


</table>

Screen

1 个答案:

答案 0 :(得分:-1)

在函数getAOSUserListing中,只有在(msgCode ===“405”)时才推送到aosListing.aosUser,否则根本不会使用res.data。