2

我有一个用 AngularJS 编写的网络应用程序：http: //asmor.com/anr

这个应用程序用于帮助构建特定游戏的套牌。

当您将卡片添加到您的牌组时，它们会添加到右上角的固定位置 div。该 div 具有动态设置的最大高度，因此它不会被浏览器窗口的底部或页面右下角的另一个固定 div 遮挡。

如果您达到最大高度，套牌中的卡片列表会滚动。见下文：

在此处输入图像描述

现在的问题是，当您通过单击红色或绿色按钮在卡片组中添加或删除卡片时，Angular 会重新绘制卡片组列表并将滚动重置回顶部。

为方便起见，这是我用于甲板列表的代码：

<div id="deck" class="shown-{{ deck.notEmpty }} faction{{ deck.identity.faction }}">
    <div class="deckStat cardTotal">
        <strong class="valid-{{ deck.enoughCards }}">Cards:</strong> {{ deck.cardCount }} / {{ deck.minCards }}
    </div>
    <div class="deckStat agendaPointsTotal shown-{{ deck.isCorp }}">
        <strong class="valid-{{ deck.enoughAgendaPoints }}">Agenda points:</strong> {{ deck.totalPoints }} / {{ deck.minPoints }}
    </div>
    <div class="deckStat influencePointsTotal">
        <strong class="valid-{{ deck.withinInfluenceLimit }}">Influence points:</strong> {{ deck.influenceTotal }} / {{ deck.influenceAvailable }}
    </div>

    <div class="deckIdentity" ng-mouseover="setPreviewLink(deck.identity)">
        <strong>Identity:</strong>
        {{ deck.identity.name }}
    </div>

    <div id="deckScrollContainer" style="max-height: {{ getMaxDeckHeight() }}px">
        <ul ng-repeat="(typeName, typeHash) in deck.cardsByType">
            <li class="deckTypeHeader">
                <strong>{{ typeName }}</strong>
                <span class="quantity">
                    ({{ typeHash.qty }})
                </span>
            </li>
            <li ng-repeat="(cardName, qty) in typeHash.cards" class="card faction{{ getCardFaction(cardName) }}" ng-mouseover="setPreviewLink(cardName)">
                <button class="btn btn-mini btn-success add qty{{qty}}" ng-click="addCard(cardName)"><i class="icon-plus"></i></button>
                <button class="btn btn-mini btn-danger remove qty{{qty}}" ng-click="removeCard(cardName)"><i class="icon-minus"></i></button>
                <span class="quantity">
                    {{ qty }}x
                </span>
                {{ cardName }}
                <span class="influence">
                    {{ getInfluenceString(cardName, qty) }}
                </span>
            </li>
        </ul>
    </div>
</div>

我尝试过的一件事是在添加或删除将抓住当前滚动位置的卡片时添加一个功能，然后再替换它。

$scope.addCard = function (c) {
    $scope.setDeckScroll();
    $scope.deck.add(c);
};
$scope.setDeckScroll = function () {
    $scope.deckScrollPosition = document.getElementById("deckScrollContainer").scrollTop;
};

和...

$scope.getCardFaction = function (card) {
    $scope._persist();
    card = getCardByName(card);
    return card.faction;
};
$scope._persist = function () {
    // Any weird stuff that needs to be done on redraw/refresh
    if ($scope.deckScrollPosition) {
        document.getElementById("deckScrollContainer").scrollTop = $scope.deckScrollPosition;
        $scope.deckScrollPosition = null;
    }
};

据我所知，Angular 在重绘页面时会多次重绘页面。我不知道最后一次重新绘制是什么时候，我不能每次都盲目地设置 scrollPosition 因为如果有人自己滚动到顶部，我将无法区分两者之间的区别那以及它是否由于重绘而滚动到顶部。

我考虑过的一个选项是使用 setTimeout 来清除 $scope.deckScrollPosition，这样

我能够通过使用 setTimeout 清除滚动位置变量来使其工作（这样每次重绘都可以访问该变量）

$scope._persist = function () {
    // Any weird stuff that needs to be done on redraw/refresh
    if ($scope.deckScrollPosition) {
        document.getElementById("deckScrollContainer").scrollTop = $scope.deckScrollPosition;
        setTimeout(function () {
            $scope.deckScrollPosition = null;
        }, 100);
    }
};

...但这似乎真的很hacky。我希望可能有更好的方法。关于我怎么能的任何想法......

  1. 每次更改数据时只重绘一次角度（例如，也许我编码的东西很糟糕，迫使它重绘多次？）

  2. 以某种方式应对重绘而不诉诸 setTimeout 诡计？

4

2 回答 2

2

在这里找到了答案：

http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html

和 plunkr 的例子，有点定制在这里：http ://plnkr.co/edit/CTVgvEoY7CnLX38o70i4?p=preview

基本上，您设置 location.hash 和滚动到它。希望它对您有用，因为您的设置有点复杂。

e：刚刚注意到它实际上将视口集中在最后一项上，这实际上是不可取的。

于 2013-05-03T09:48:32.993 回答
1

有几件事应该对您有所帮助。如果其中的项目deck.cardsByType有一个 ID 或一些唯一字段，您可以告诉 AngularJS 跟踪这些项目，并且只用新 ID 重绘项目，其他项目会更新，这应该会停止重新绘制整个列表：

<li ng-repeat="(cardName, qty) in typeHash.cards track by id">

您还说“我不知道最后一次重绘是什么时候” - 您可以添加一个指令以指示何时绘制项目：

app.directive( 'repeatLoad', function(){
    return {
        link: function( scope, element, attrs ) {
            scope.$eval( attrs['repeatLoad'] );
        }
    }
});

然后在控制器中添加带有函数的指令以调用

<li 
  ng-repeat="(cardName, qty) in typeHash.cards track by id"
  repeat-load="loadedElement()"
>

您可以在控制器中计算它们，并检查何时添加了最后一个

$scope.cnt_cards = 0;
$scope.loaded_cards = 0;

$scope.loadedElement = function() {
  $scope.loaded_cards++;

  if( $scope.cnt_cards == $scope.loaded_cards ) {
    console.log('All cards loaded');
  }
}
于 2013-11-17T21:44:04.317 回答