Question

我正在研究AngularJS，查看网站http://campus.codeschool.com/courses/shaping-up-with-angular-js/contents并下载视频，然后浏览计算机上的示例。

一切顺利，直到视频codeschool_1329.mp4，否则称为“Shaping_Up_With_Angular_JS_Level_2b”。当选择面板的逻辑在HTML代码中时，该示例正常工作，但是当逻辑移动到控制器时，它不再正常工作。因此，我有相关的HTML代码：

<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>
    <!-- Repeated for Specifications and Reviews -->
  </ul>
</section>
<div class="panel" ng-show="panel.isSelected(1)">
  <h4>Description</h4>
  <p>{{product.description}}</p>
</div>
<!-- Repeated for Specifications and Reviews -->

以及我的JavaScript代码：

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

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

与视频完全一样。后者使用Angular模块和商店的另一个Angular控制器。

使用Google Chrome和Firefox，当我点击每个标签“说明”，“规格”和“评论”时，所选标签会突出显示，如同在视频中一样，尽管是蓝色而不是深紫色，但是应该显示在所选选项卡下方的文本根本不显示。看起来在PanelController中的isSelected函数存在某种类型的问题，在HTML代码的下半部分使用ng-show =“panel.isSelected（1）”等，尽管它似乎可以正常使用ng选项卡突出显示时，-class =“{active：panel.isSelected（1）}”。

当这个逻辑在HTML代码中时，这正常工作，如上所述，但无论我能做什么，当逻辑在PanelController中时，我都无法正常工作。

必须有一些我想念的简单的事情，并且很高兴能够解决这个问题 - 非常感谢。

Answer 1

<section ng-controller="PanelController as panel">
  ...
</section>
<div class="panel" ng-show="panel.isSelected(1)">

只有section元素由面板控制器控制，但您尝试使用该部分之外的panel.isSelected(1)。这样就行不通了。

将div置于section内，或将所有内容与其他div一起包装，然后将ng-controller="PanelController as panel"移至该div包裹。

AngularJS视频问题

1 个答案: