jQuery Layout Plugin + AngularJS Tabs

Question

I use jQuery layout plugin. Inside a pane I use tabs created by angularjs (code below). When I close the layout pane (south pane in the jsfiddle) and open it again, the tabs don't work anymore. Resizing doesn't cause this problem.

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/

I try to get it run in jsfiddle without success: http://jsfiddle.net/jfn5z/84/ — daniel, Oct 09 '13 at 14:36

score 1 · Answer 1 · answered Oct 10 '13 at 05:03

1

I hope this will help you

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

answered Oct 10 '13 at 05:03

Nishchit

18,284
12
54
81

this does not work. Close the south pane and open it again => tabs don't work anymore – daniel Oct 10 '13 at 09:57
First of all sorry for my miss understanding , it seems like layout plugin changes 'active' class on ( .tab-content.pane-tab). Please check this if it will help [tab] (http://mgcrea.github.io/angular-strap/#/tab) – Nishchit Oct 10 '13 at 11:11

score 0 · Accepted Answer · answered Oct 09 '13 at 11:05

0

Why not you use angular-ui-bootstrap or angular-strap

Or please make jsfiddle or pluncker .

answered Oct 09 '13 at 11:05

Nishchit

18,284
12
54
81

jQuery Layout Plugin + AngularJS Tabs

2 Answers2