2015-09-26 3 views
0

Это 3:40 утра, и я собираюсь отказаться от попыток сегодня.Вкладка навигации не работает в приложении 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}} рядом с 'About' в моей навигационной панели обновляется на мой взгляд, когда я нажимаю кнопку t abs, как и активный класс. Когда я помещаю выражение {{tab}} за пределы навигационной панели, он не обновляется всякий раз, когда нажимается. Очевидно, что это связано с областью действия переменной, но я использую PanelController для родительского элемента как для навигационной, так и для моей основной области.

Я не вижу, что я делаю неправильно.

Буду признателен за свежую пару глаз - я уже немного помог с этим, и уже более любезно согласимся.

ответ

1

Диагноз проблемы довольно просто, 2 контроллера означает 2 экземпляров, каждый из которых имеет свою собственную сферу

Вы должны использовать услуги или события, чтобы они общаются друг с другим

+0

Спасибо - я просто понял, что когда я использую атрибут 'ng-controller', он каждый раз создавал отдельный экземпляр панели управления, который не делил данные. В любом случае, мой второй контроллер использует только одну вещь, которая не должна ничего делать в другом. Я положил тег ctrl панели в тело, и теперь он работает! –

Смежные вопросы