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

Question

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

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

我曾尝试使用ng-iScroll 插件，但没有任何运气。我也尝试为 .refresh 方法设置超时，但仍然没有结果。

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

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

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

编辑

在 steppefox 给出答案后，我尝试使用指令设置解决方案。我现在在控制台中收到 0 个错误，并且角度正确显示了列表，但滚动仍然不起作用 - 即使我尝试调整内容的大小。

这是新的小提琴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 运行的时间。

1. 创建一个角度指令

   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(); }) } } });

2. 删除你在加载的函数中调用iscroll的JS代码，因为它现在没用了（我们有指令）。

3. 添加到你的包装器<div class="tfl-overflow" id="iscrollwrapper">属性iscroll-directive，就像<div class="tfl-overflow" id="iscrollwrapper" iscroll-directive>

2015-08-03 更新

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