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: jsfiddle.net/jfn5z/84 — daniel
– daniel, Commented Oct 9, 2013 at 14:36

Nishchit · Accepted Answer · 2013-10-10 05:03:25Z

1

I hope this will help you

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

answered Oct 10, 2013 at 5:03

Nishchit

19.2k12 gold badges58 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

daniel Over a year ago

this does not work. Close the south pane and open it again => tabs don't work anymore

Nishchit Over a year ago

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] (mgcrea.github.io/angular-strap/#/tab)

Nishchit · Accepted Answer · 2013-10-09 11:05:02Z

0

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

Or please make jsfiddle or pluncker .

answered Oct 9, 2013 at 11:05

Nishchit

19.2k12 gold badges58 silver badges81 bronze badges

Collectives™ on Stack Overflow

jQuery Layout Plugin + AngularJS Tabs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related