javascript - jQuery 布局插件 + AngularJS 选项卡

Question

我使用jQuery 布局插件。在窗格中，我使用由 angularjs 创建的选项卡（下面的代码）。当我关闭布局窗格（jsfiddle 中的南窗格）并再次打开它时，选项卡不再起作用。调整大小不会导致此问题。

directive('tabs', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: {},
        controller: function ($scope, $element) {
            var tabpanes = $scope.tabpanes = [];

            $scope.select = function (tabpane) {
                angular.forEach(tabpanes, function (tabpane) {
                    tabpane.selected = false;
                });
                tabpane.selected = true;
            }

    this.addTabPane = function (tabpane) {
                if (tabpanes.length == 0) $scope.select(tabpane);
                tabpanes.push(tabpane);
            }
  },
        template:
        '<div class="tabbable">' +
        '<ul class="nav nav-tabs">' +
        '<li ng-repeat="tabpane in tabpanes" ng-class="{active:tabpane.selected}">' +
        '<a href="" ng-click="select(tabpane)">{{tabpane.title}}</a>' +
        '</li>' +
        '</ul>' +
        '<div class="tab-content" ng-transclude></div>' +
        '</div>',
        replace: true
    };
}).
directive('tabpane', function () {
    return {
        require: '^tabs',
        restrict: 'E',
        transclude: true,
        scope: { title: '@' },
        link: function (scope, element, attrs, tabsCtrl) {
            tabsCtrl.addTabPane(scope);
        },
        template:
        '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
        '</div>',
        replace: true
    };
})

jsfiddle：http: //jsfiddle.net/jfn5z/84/

Answer 1

我希望这能帮到您

工作 ==> fiddle http://jsfiddle.net/Nishchit14/jfn5z/85/

Answer 2

为什么不使用angular-ui-bootstrap或angular-strap

或者请制作 jsfiddle 或 pluncker 。