Question

您好我想使用角度来动态填充Foundation轨道滑块的内容：

<div class="moreGamesArea">
    <ul class="orbit" data-orbit>
        <li ng-repeat="games in catalogGames">
            <div>{{games[0]}}</div>
        </li>
    </ul>
</div>

但它没有正确初始化滑块。在dom模型中，我看到它应该是3个元素<li> - 所以角度工作正常，但滑块 - 只有一个幻灯片！怎么了？谢谢

Answer 1

首先。您需要创建一个指令。

.directive('afterRenderRepeat', function() {
  return function(scope, element, attrs) {
    if (scope.$last){
        $(document).foundation();
    }
 };
})

二。在ng-repeat部分中调用它。

<div class="moreGamesArea">
    <ul class="orbit" data-orbit>
        <li ng-repeat="games in catalogGames" data-after-render-repeat>
            <div>{{games[0]}}</div>
        </li>
    </ul>
</div>

该指令帮助我释放了基础5。

Answer 2

在基金会6中

初始化轨道使用：

Foundation.reInit（ '轨道'）;

.directive('initOrbit', function(){
    return function(scope) {
        if (scope.$last){             //  when  ng-repeat finish to load all elements
            Foundation.reInit('orbit');   // reinit orbit
        }
    };
})

<ul class="orbit-container">
    <li class="orbit-slide" ng-repeat="slide in slides" init-orbit>

更多：https://foundation.zurb.com/sites/docs/javascript.html#initializing

angularjs +基础轨道

2 个答案: