Question

我有一个解决方案，其中包含另一个ng-repeat中的ng-repeat。我用它来创建两个包含静态内容和动态内容的表。在第一次加载时，滚动不起作用。一旦您使用内容调整页面大小，滚动工作正常。在iPad和Android平板电脑上，我遇到滚动在第一次加载时工作，但宽度不包含表格中的最后两个静态TD。

我很确定解决方案是为iScroll设置正确的.refresh方法，但我无法确定正确的设置。

我尝试过使用ng-iScroll插件，但没有运气。我还试图为.refresh方法设置超时但仍没有结果。

我能用这个小提琴重建问题：jsfiddle.net/8BUjf/115/

当您运行小提琴时，滚动不起作用。只需稍微调整内容页面的大小，滚动就可以正常工作，并且包含所有静态和动态td的正确宽度。

以上代码也可以在上面的小提琴中找到。

修改

在steppefox的回答之后，我尝试使用该指令设置解决方案。我现在在consol中得到0个错误，而angular正确显示列表，但滚动仍然无效 - 即使我尝试调整内容的大小。

以下是新的小提琴http://jsfiddle.net/8BUjf/149/，下面的代码也会更新。

我的HTML

<div ng-app="app">
<div ng-controller="TodoCtrl">
<div class="tfl-overflow" id="iscrollwrapper" iscrollDirective>
<div id="iscroller">
            <table class="table" style="border-bottom: 1px solid #E77E23; ">
                <tr>
                    <td>
                        <h3 class="text-width">
                            <a href="">Static TD 1</a>
                        </h3>
                    </td>
                    <td ng-repeat="parentCategory in totalParentCategoriesCount" class="text-info">
                        <h3 class="text-width">
                            <a href="">Dynamic TD {{parentCategory.count}}</a>
                        </h3>
                    </td>
                    <td>
                        <div>
                            <h3 class="text-width">
                                <a href="">Static TD 2</a>
                            </h3>
                        </div>
                    </td>
                    <td>
                        <div>
                            <h3 class="text-width">
                                <a href="">Static TD 3</a>
                            </h3>
                        </div>
                    </td>
                </tr>
            </table>
            <table class="table table-striped">
                  <tr ng-repeat="fighter in totalFighterList">
                    <td>
                        <p class="text-width">Static TD</p>
                    </td>
                    <td ng-repeat="parentCategory in totalParentCategoriesCount">
                        <p class="text-width">Dynamic TD {{parentCategory.count}}</p>
                    </td>
                    <td>
                        <p class="text-width">Static TD 2</p>
                    </td>
                    <td>
                        <p class="text-width">Static TD 3</p></td>
                  </tr>
            </table>
        </div>
    </div>
</div>
</div>

角

var mainApp = angular.module("app", []);

mainApp.directive('iscrollDirective', iscrollDirective);
iscrollDirective.$inject = ['$timeout'];
function iscrollDirective($timeout) {
return {
    restrict:'A',
    link: function ($scope, element, attrs) {
        $timeout(function(){
            var iscrollwrapper = new IScroll(element.attr('#iscrollwrapper'), {
                scrollX: true,
                scrollY: false,
                mouseWheel: false,
                scrollbars: false,
                useTransform: true,
                useTransition: false,
                eventPassthrough: true,
            });
            iscrollwrapper.refresh();
        })
    }
}
};

mainApp.controller('TodoCtrl', function($scope) {
$scope.totalParentCategoriesCount = [
    {count:1},
    {count:2},
    {count:3},
    {count:4},
    {count:5},
    {count:6}];

$scope.totalFighterList = [
    {count:1},
    {count:2},
    {count:3},
    {count:4},
    {count:5},
    {count:6}];
});

CSS

#iscroller{
display:inline-block;
width:auto;
}

.text-width{
width:150px;
}

.tfl-overflow {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}

#iscrollwrapper{
width:100%;
}

Answer 1

问题是，因为iScroll早于ng-repeat运行的角度来运行。

创建角度指令

angular.module('app').directive('iscrollDirective', iscrollDirective); iscrollDirective.$inject = ['$timeout']; function iscrollDirective($timeout) { return { restrict:'A', link: function ($scope, element, attrs) { $timeout(function(){ iscrollwrapper = new IScroll(element.attr('id'), { scrollX: true, scrollY: false, mouseWheel: false, scrollbars: false, useTransform: true, useTransition: false, eventPassthrough: true, }); iscrollwrapper.refresh(); }) } } });
删除你在函数加载中调用iscroll的JS代码，因为它现在没用了（我们有指令）。
添加到您的包装器<div class="tfl-overflow" id="iscrollwrapper">属性iscroll-directive，就像<div class="tfl-overflow" id="iscrollwrapper" iscroll-directive>

更新2015-08-03

http://jsfiddle.net/8BUjf/160 - 固定小提琴

Ng-repeat和iScroll动态宽度不起作用

1 个答案: