AngularJS - 在引導標籤中使用多個控制器

Question

我想用引導標籤分割內容。這工作正常，除了html斷開時，我將ng控制器附加到父元素。有沒有辦法使用html元素來插入ng-controller而不影響在bootstrap中顯示標籤頁所需的層次結構？

工作標籤佈局：

<div ng-app="myApp"> 
    <div class="tab-content"> 
    <div id="tab1" class="tab-pane fade in active">{{ tab1_content }}</div> 
    <div id="tab2" class="tab-pane fade in">{{ tab2_content }}</div> 
    <div id="tab3" class="tab-pane fade in">{{ tab3_content }}</div> 
    </div> <!-- all tab-content --> 
</div> <!-- end myApp --> 

我如何想用我的控制器（打破了通過把內容在所有選項卡中的選項卡顯示：

<div ng-app="myApp"> 
    <div class="tab-content"> 
    <ng-controller ng-controller="test_controller1"> 
     <div id="tab1" class="tab-pane fade in active">{{ tab1_content }}</div> 
     <div id="tab2" class="tab-pane fade in">{{ tab2_content }}</div> 
    </ng-controller> <!-- end test_controller1 --> 
    <ng-controller ng-controller="test_controller2"> 
     <div id="tab3" class="tab-pane fade in">{{ tab3_content }}</div> 
    </ng-controller> <!-- end test_controller2 --> 
    </div> <!-- all tab-content --> 
</div> <!-- end myApp --> 

演示：https://jsfiddle.net/L2b4yLfa/

Answer 1

這是可以接受的嗎？

我已初始化相同的控制器兩個選項卡。由於它是一個小窗口，代碼片段輸出將顯示移動視圖。點擊run code snippet -> full page

angular.module('myApp', []); 
 
angular.module('myApp').controller('test_controller1', function($scope) { 
 
\t $scope.tab1_content = "Tab One Content"; 
 
\t $scope.tab2_content = "Tab Two Content"; 
 
}); 
 

 
angular.module('myApp').controller('test_controller2', function($scope) { 
 
\t $scope.tab3_content = "Tab Three Content"; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<nav class="navbar navbar-default"> 
 
\t <div class="container-fluid"> 
 
\t \t <div class="navbar-header"> 
 
\t \t \t <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#myNavbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
 
\t \t \t <a class="navbar-brand" href="#">Title</a> 
 
\t \t </div> 
 
\t \t <div class="collapse navbar-collapse" id="myNavbar"> 
 
\t \t \t <ul class="nav navbar-nav"> 
 
\t \t \t \t <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li> 
 
\t \t \t \t <li><a data-toggle="tab" href="#tab2">Tab 2</a></li> 
 
\t \t \t \t <li><a data-toggle="tab" href="#tab3">Tab 3</a></li> 
 
\t \t \t </ul> 
 
\t \t \t <ul class="nav navbar-nav navbar-right"> 
 
\t \t \t \t <li>Testing</li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </div> 
 
</nav> 
 

 
<div ng-app="myApp"> 
 
    <div class="tab-content"> 
 
     <div id="tab1" ng-controller="test_controller1" class="tab-pane fade in active">{{ tab1_content }}</div> 
 
     <div id="tab2" ng-controller="test_controller1" class="tab-pane fade in">{{ tab2_content }}</div> 
 
     <div id="tab3" ng-controller="test_controller2" class="tab-pane fade in">{{ tab3_content }}</div> 
 
    </div> <!-- all tab-content --> 
 
</div> <!-- end myApp -->

因此，在未來，你將需要相同的控制器之間的數據共享使用服務的兩個標籤。

Answer 2

我的解決方案是切換到角引導UI，不使用內置的UIB選項卡，並使用$ rootcope來處理'active_tab'值。

<style> .uib-tab.nav-item { display:none; } .nav-tabs { border-bottom: inherit; } </style> 
<div ng-app="myApp"> 
    <nav class="navbar navbar-default" role="navigation"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" ng-click="navCollapsed = !navCollapsed"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Title</a> 
    </div> <!-- end navbar-header --> 
    <div class="collapse navbar-collapse" uib-collapse="navCollapsed"> 
     <ul class="nav navbar-nav"> 
     <li ng-class="{active: active_tab == 1}" ng-click="active_tab = 1"><a href="#">Tab 1</a></li> 
     <li ng-class="{active: active_tab == 2}" ng-click="active_tab = 2"><a href="#">Tab 2</a></li> 
     <li ng-class="{active: active_tab == 3}" ng-click="active_tab = 3"><a href="#">Tab 3</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Selected Tab: {{ active_tab }}</a></li> 
     </ul> 
    </div> <!-- end uib-collapse --> 
    </nav> <!-- end nav --> 

    <uib-tabset active="active_tab"> 
    <ng-controller ng-controller="test_controller1"> 
     <uib-tab index="1" heading="heading not displayed">1: {{ tab1_content }}</uib-tab> 
     <uib-tab index="2" heading="heading not displayed">2: {{ tab2_content }}</uib-tab> 
    </ng-controller> 
    <ng-controller ng-controller="test_controller2"> 
     <uib-tab index="3" heading="heading not displayed">3: {{ tab3_content }}</uib-tab> 
    </ng-controller> 
    </uib-tabset> 
</div> 

演示：https://plnkr.co/edit/36tkl3pCV7hgNz8rbpTq?p=preview