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

Question

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

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

我曾尝试使用 ng-iScroll 插件，但没有成功。我还尝试为 .refresh 方法设置超时，但仍然没有结果。

我能够用这个 fiddle 重建问题:jsfiddle.net/8BUjf/115/

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

下面的代码也可以在上面的fiddle中找到。

编辑

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

这是新的 fiddle 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>

Angular

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 的运行时间早于 angular 运行的 ng-repeat。

1. 创建一个 Angular Directive(指令)

   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">属性是滚动指令，就像那样<div class="tfl-overflow" id="iscrollwrapper" iscroll-directive>

2015-08-03 更新

http://jsfiddle.net/8BUjf/160 - 固定 fiddle