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

Question

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

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

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

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

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

下面的代码在上面的fiddle中也有。

编辑

在得到 steppefox 的回答后，我尝试使用指令设置解决方案。我现在在控制台中收到 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 运行ned 比 ng-repeat 运行早 angular。

创建一个 angular 指令

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

更新 2015-08-03

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

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

Ng-repeat and iScroll dynamic width not working

javascript

iscroll

angularjs