Question

现在是凌晨3点40分，我今晚将放弃尝试。

选项卡不会更新导航区域外的页面。

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}}正在我的视图中更新，活动类也是如此。当我在导航栏之外放置{{tab}}表达式时，无论何时单击它都不会更新。显然这与变量的范围有关，但我在导航和主要区域的父节点上使用PanelController。

我看不出我做错了什么。

我很欣赏一双清新的眼睛 - 我已经对此已经有了一些帮助，而且还会受到更多人的欢迎。

Answer 1

问题诊断相当简单，2个控制器意味着2个实例，每个实例都有自己的范围

您需要使用一项或多项服务让他们一起沟通

选项卡导航在AngularJS应用程序中不起作用

1 个答案: