Это 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 для родительского элемента как для навигационной, так и для моей основной области.
Я не вижу, что я делаю неправильно.
Буду признателен за свежую пару глаз - я уже немного помог с этим, и уже более любезно согласимся.
Спасибо - я просто понял, что когда я использую атрибут 'ng-controller', он каждый раз создавал отдельный экземпляр панели управления, который не делил данные. В любом случае, мой второй контроллер использует только одну вещь, которая не должна ничего делать в другом. Я положил тег ctrl панели в тело, и теперь он работает! –