CODEWITHSUNDEEP
htmlangularjstwitter-bootstrap
Matt Cree
Matt Cree

Reputation: 39

Tab navigation not working in AngularJS app

It's 3:40AM and I'm going to give up trying for tonight.

The tabs will not update the page outside of the navigation area.

The PanelController looks like this:-

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

    $scope.tab = 1;

    $scope.selectTab = function(setTab) {

        $scope.tab = setTab;

    };

    $scope.isSelected = function(checkTab) {

        return $scope.tab === checkTab;

    };

});

and the nav pane looks like this:-

<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>

and the placeholder HTML for my two tabs is as follows:-

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

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

As you can see, the {{tab}} next to 'About' in my navbar is updating in my view as I click the tabs, as is the active class. When I place a {{tab}} expression outside of the navbar it isn't updating whenever it's clicked. Obviously this is something related to the scope of the variable, but I am using the PanelController on the parent of both the nav and my main area.

I can't see what I'm doing wrong.

I'd appreciate a fresh pair of eyes -- I've already some help with this already and any more will be graciously accepted.

Upvotes: 0

Views: 971

Answers (1)

charlietfl
charlietfl

Reputation: 171700

The problem diagnosis is fairly simple, 2 controllers means 2 instances that each have their own scope

You would need to use a service or events to have them communicate together

Upvotes: 1

Related Questions