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/