5

angularJS で jquery UI タブを使用しており、ng-repeat を使用してリスト項目とタブ コンテナーを生成しています。タブは機能していますが、タブ コンテナーが正しく機能していません。

テンプレート - tabs.html

<ul ng-sortable="pages">
    <li ng-controller="pageCtrl" ng-repeat="page in pages">
        <a class="pageName" href="#{{page.id}}">{{page.name}}</a>
    </li>
</ul>
<div id="{{page.id}}" ng-repeat="page in pages">
    <p>{{page.id}}</p>
</div>

指令

.directive('ngTabs', function($rootScope) {
        return {
            restrict: 'E',
            templateUrl: "js/templates/tabs.html",
            link: function(scope, elm) {
                elm.tabs();
            }
        };
    })

jsfiddle リンク: http://jsfiddle.net/sannitesh/NLw6y/

4

1 に答える 1

1

問題は、ngTabs ディレクティブが実行されたときに、その div のコンテンツがまだ生成されていないことです。.tabs() への呼び出しを setTimeout でラップすると、うまくいきます。

myApp.directive('ngTabs', function() {
    return function(scope, elm) {
        setTimeout(function() {
            elm.tabs();
        },0);
    };
});

jsFiddleを参照してください。これは最善の方法/角度のある方法ではない可能性があります。

特に実行時に実際のタブが変更される場合は、コンパイルサービスを確認できます。

于 2012-11-23T13:23:31.540 に答える