jQuery布局插件+ AngularJS标签

Question

我使用jQuery layout plugin。在一个窗格中，我使用由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

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

OR请的jsfiddle或pluncker。

Answer 2

我希望这将有助于你

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