Javascript 角度控制器工作不正常

我有3个选项卡，单击时应显示相应的信息：

<section ng-controller="PanelController as panel">
  <ul class="nav nav-pills">
    <li ng-class="{ active:panel.isSelected(1) }">
      <a href ng-click="panel.selectTab(1)">Description</a>
    </li>
    <li ng-class="{ active:panel.isSelected(2) }">
      <a href ng-click="panel.selectTab(2)">Specifications</a>
    </li>
    <li ng-class="{ active:panel.isSelected(3) }">
      <a href ng-click="panel.selectTab(3)">Reviews</a>
    </li>
  </ul>
{{tab}}
</section>

<div class="panel" ng-show="panel.isSelected(1)">
  <h4>Description</h4>
  <p>{{product.description}}</p>
</div>
<div class="panel" ng-show="panel.isSelected(2)">
  <h4>Specifications</h4>
  <blockquote>{{product.specification}}</blockquote>
</div>
<div class="panel" ng-show="panel.isSelected(3)">
  <h4>Reviews</h4>
  <blockquote>{{product.review}}</blockquote>
</div>

当我单击选项卡时，信息不会显示（例如，{{product.description}}}不显示我的描述）。我在developer tools中测试了代码，它告诉我，当选择不同的选项卡时，控制器中的“this.tab”实际上会更改为相应的选项卡编号，但我无法理解为什么没有显示我的信息

---

在我将选项卡添加到应用程序之前，{{product.description}}等功能运行良好，但是当选择选项卡时，它现在不会显示。

导致该问题的原因很少

您正在使用as语法，这意味着在控制器中必须执行以下操作：

app.controller('PanelController', function(){
    var panel=this;
    panel.tab = 1;

    panel.selectTab = function(setTab) {
        panel.tab = setTab;
    };
    panel.isSelected = function(checkTab){
        return panel.tab === checkTab;
    };
});

在html中，将您的类面板div置于section选项卡下，因为它们超出了控制器的范围，如下图所示

   <section ng-controller="PanelController as panel">
      <ul class="nav nav-pills">
        <li ng-class="{ active:panel.isSelected(1) }">
          <a href ng-click="panel.selectTab(1)">Description</a>
        </li>
        <li ng-class="{ active:panel.isSelected(2) }">
          <a href ng-click="panel.selectTab(2)">Specifications</a>
        </li>
        <li ng-class="{ active:panel.isSelected(3) }">
          <a href ng-click="panel.selectTab(3)">Reviews</a>
        </li>
      </ul>
    {{tab}}

<div class="panel" ng-show="panel.isSelected(1)">
      <h4>Description</h4>
      <p>{{product.description}}</p>
    </div>
    <div class="panel" ng-show="panel.isSelected(2)">
      <h4>Specifications</h4>
      <blockquote>{{product.specification}}</blockquote>
    </div>
    <div class="panel" ng-show="panel.isSelected(3)">
      <h4>Reviews</h4>
      <blockquote>{{product.review}}</blockquote>
    </div>
    </section>

{{tab}}
描述
{{product.description}}

规格
{{product.specification}}
评论
{{product.review}

您的代码中有两个问题

您的面板div位于控制器div之外

您应该使用这个。panel=1；不是这个

var-app=angular.module（'newApp'，[]）；
app.controller（'PanelController'，function（）{
该面板=1；
this.selectTab=函数（setTab）{
this.panel=setTab；
};
this.isSelected=函数（checkTab）{
返回this.panel==checkTab；
};
});









{{tab}}
描述
{{product.description}}

规格
{{product.specification}}
评论
{{product.review}
您的选项卡位于控制器元素之外（即
）。他们没有访问控制器实例的权限，因此显示产品的
div
不在使用ng controller绑定的
部分。
   <section ng-controller="PanelController as panel">
      <ul class="nav nav-pills">
        <li ng-class="{ active:panel.isSelected(1) }">
          <a href ng-click="panel.selectTab(1)">Description</a>
        </li>
        <li ng-class="{ active:panel.isSelected(2) }">
          <a href ng-click="panel.selectTab(2)">Specifications</a>
        </li>
        <li ng-class="{ active:panel.isSelected(3) }">
          <a href ng-click="panel.selectTab(3)">Reviews</a>
        </li>
      </ul>
    {{tab}}

<div class="panel" ng-show="panel.isSelected(1)">
      <h4>Description</h4>
      <p>{{product.description}}</p>
    </div>
    <div class="panel" ng-show="panel.isSelected(2)">
      <h4>Specifications</h4>
      <blockquote>{{product.specification}}</blockquote>
    </div>
    <div class="panel" ng-show="panel.isSelected(3)">
      <h4>Reviews</h4>
      <blockquote>{{product.review}}</blockquote>
    </div>
    </section>