ng-Click影響到不同的控制器

Question

我正在使用angularjs UI引導來製作選項卡。我在導航欄中有切換到不同選項卡的按鈕。具有自己的控制器的navbar嵌套在主控制器內。我想知道如何在導航欄切換選項卡中製作按鈕。

我有一個普拉克here 或低於

<div ng-controller="TabsDemoCtrl"> 
<header> 

    <div ng-controller="navbarcontroller"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" >Brand 
     </a> 
    </div> 
    <div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'"> 
     <ul class="nav navbar-nav navbar-right" style="pointer-events: auto;"> 
     <li> 
      <!-- this buttons dosnt works --> 
      <button type="button" class="btn btn-default btn-sm" ng-click="active = 1">Select 1st tab</button> 
      <button type="button" class="btn btn-default btn-sm" ng-click="active = 2">Select 2nd tab</button> 
     </li> 
     </ul> 
    </div> 
    </div> 
</header> 
<p> ----- navbar controller ends here ----- </p> 

<hr> 

    <p> ---- tab controller starts here ------ </p> 
    <!-- this buttons works --> 
    <button type="button" class="btn btn-default btn-sm" ng-click="active = 1">Select 1st tab</button> 
    <button type="button" class="btn btn-default btn-sm" ng-click="active = 2">Select 2nd tab</button> 

    <uib-tabset active="active"> 
    <uib-tab index="1" heading="Tab1" > 
     Content 1 
    </uib-tab> 
    <uib-tab index="2" heading="Tab1" > 
     Content 2 
    </uib-tab> 
    </uib-tabset> 
</div> 

HTML和JS這是JS文件兩個控制器之間

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); 
angular.module('ui.bootstrap.demo') 

.controller('TabsDemoCtrl', function ($scope, $window) { 

}) 


.controller('navbarcontroller', function ($scope, $window) { 

}); 

Answer 1

你必須份額您active財產。爲此，我們需要改變一些事情。

你必須實現服務（讓我們稱之爲tabSelector），像這樣：

.service('tabSelector', function(){ 
}); 

2-現在，在這兩個TabsDemoCtrl和navbarcontroller你需要使用以前創建的服務，並實現其使用tabSelector服務，這樣兩個功能：

//this should be done with 'TabsDemoCtrl' and 'navbarcontroller' (this last one was omitted for brevity) 
.controller('TabsDemoCtrl', function ($scope, $window, tabSelector) { 

    //set the active tab 
    $scope.selectTab = function(tab){ 
     tabSelector.active = tab; 
    } 
    //keep synced the active tab 
    $scope.getActive = function(){ 
     return tabSelector.active; 
    } 

}) 

3-在視圖：

• 更換ng-clik（active = 1）的與該內容：selectTab(1)（在控制器中的功能）。請注意，您必須將1替換爲適當的值。
• 和<uib-tabset active="active">爲<uib-tabset active="getActive()">

---

請的內容，請參閱this working example（您plunker分叉）

---

你可以找到一些相關的信息在這裏：

1. Share data between AngularJS controllers
2. Passing data between controllers in Angular JS?
3. How to share data between controllers in angularjs
4. Sharing data between controllers in AngularJS