Tab導航無法在AngularJS應用程序中工作

現在是凌晨3:40，我將放棄今晚的嘗試。Tab導航無法在AngularJS應用程序中工作

選項卡不會更新導航區域外的頁面。

的PanelController看起來是這樣的： -

app.controller('PanelController', function($scope) { 

    $scope.tab = 1; 

    $scope.selectTab = function(setTab) { 

     $scope.tab = setTab; 

    }; 

    $scope.isSelected = function(checkTab) { 

     return $scope.tab === checkTab; 

    }; 

});

和導航窗格看起來是這樣的： -

<div class="navbar-collapse collapse" ng-controller="PanelController"> 
    <ul class="nav navbar-nav navbar-right"> 

    <li ng-class="{ active:isSelected(1) }"> 
     <a href ng-click="selectTab(1)">Blog</a> 
    </li> 
    <li ng-class="{ active:isSelected(2) }"> 
     <a href ng-click="selectTab(2)">About{{tab}}</a> 
    </li> 
    <li ng-class="{ active:isSelected(3) }"> 
     <a href ng-click="selectTab(3)">Contact</a> 
    </li> 

    </ul> 
</div>

和佔位符HTML我的兩個標籤如下： -

<div ng-controller="PanelController"> 
     <div ng-show="isSelected(1)"> 
     <p>Hello</p> 
     </div> 

     <div ng-show="isSelected(2)"> 
     <p>Please work</p> 
     </div> 
    </div>

正如您所看到的，我的導航欄中的「關於」旁邊的{{tab}}正在更新，因爲我點擊了t abs，活動課也是如此。當我在導航欄外放置一個{{tab}}表達式時，只要點擊它就不會更新。很明顯，這與變量的範圍有關，但我在nav和我的主區域的父級上使用了PanelController。

我看不到我做錯了什麼。

我會欣賞一雙新鮮的眼睛 - 我已經有一些幫助，並且已經得到了很多人的認可。

來源

2015-09-26 Matt Cree

問題的診斷是很簡單的，2個控制器是指2個實例，每個都有自己的範圍

您將需要使用服務或事件有他們溝通

來源

2015-09-26 03:01:32 charlietfl

感謝一起 - 我只是意識到，當我使用'ng-controller'屬性時，它每次都創建一個不同的panelcontroller實例，它不共享數據。無論哪種方式，我的第二個控制者只處理一個不需要在另一箇中做任何事情的特定事物。我把面板的CTRL標籤放在身上，現在它正在工作！ –

Tab導航無法在AngularJS應用程序中工作

回答

相關問題