Question

app2.js

(function(){
    var app = angular.module("panel",[]);
    app.controller('PanelController',function(){
          this.tab = 1;

          this.setTab = function(setTab){
                this.tab = setTab;
          };


    });

})();

view 是：

<html ng-app="panel">

<head>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="app2.js"></script>\
    <style type="text/css">
    li{
        width:100px;
    }

    </style>
</head>

<body>

<section ng-controller="PanelController as panel">
    <ul class="nav nav-pills" >
        <li ng-class="{active:tab === 1}"><a ng-click="panel.setTab(1)" href="#">1</a></li>
        <li ng-class="{active:tab === 2}"><a ng-click="tab = 2" href="#">2</a></li>
        <li ng-class="{active:tab === 3}"><a ng-click="tab = 3" href="#">3</a></li>
        <li ng-class="{active:tab === 4}"><a ng-click="tab = 4" href="#">4</a></li>
    </ul>
    <h1>{{tab}}</h1>

    <div class="panel">
        <p ng-show="tab===1">Suppose this is Data coming from object for 1 </p>
        <p ng-show="tab===2">Suppose this is Data coming from object for 2 </p>
        <p ng-show="tab===3">Suppose this is Data coming from object for 3 </p>
        <p ng-show="tab===4">Suppose this is Data coming from object for 4 </p>

    </div>



</section>



</body>
</html>

问题在于panel.set(1)，在点击<a>时未调用此问题。为什么会这样？

是否正在访问控制器内的属性tab

Answer 1

调用

panel.setTab。问题是由模板中的tab变量引起的。您应该使用panel.tab替换它们。

<section ng-controller="PanelController as panel">表示

$scope.panel = new PanelController();

所以如果你想在你的控制器中使用变量。您应该添加panel.前缀，否则表示$scope.tab

Answer 2

问题是因为您正在使用controllerAs语法，您还需要在设置/检查活动选项卡时使用它。所以基本上你需要使用panel.tab而不是tab（$scope属性，而不是控制器自己的字段。）

所以你的固定代码看起来像这样：

<ul class="nav nav-pills">
    <li ng-class="{active: panel.isActive(1)}">
        <a ng-click="panel.setTab(1)" href="#">1</a>
    </li>
    <li ng-class="{active: panel.isActive(2)}">
        <a ng-click="panel.setTab(2)" href="#">2</a>
    </li>
    <li ng-class="{active: panel.isActive(3)}">
        <a ng-click="panel.setTab(3)" href="#">3</a>
    </li>
    <li ng-class="{active: panel.isActive(4)}">
        <a ng-click="panel.setTab(4)" href="#">4</a>
    </li>
</ul>

<h1>{{panel.tab}}</h1>

<div class="panel">
    <p ng-show="panel.tab===1">Suppose this is Data coming from object for 1 </p>
    <p ng-show="panel.tab===2">Suppose this is Data coming from object for 2 </p>
    <p ng-show="panel.tab===3">Suppose this is Data coming from object for 3 </p>
    <p ng-show="panel.tab===4">Suppose this is Data coming from object for 4 </p>
</div>

我还定义了方便的isActive方法，因此您的模板看起来更干净：

this.isActive = function(tab) {
    return this.tab === tab;
};

以下是该解决方案的工作演示。

＆＃13;

angular.module('demo', []).controller('PanelController', function() {
    this.tab = 1;

    this.setTab = function(setTab) {
        this.tab = setTab;
    };

    this.isActive = function(tab) {
        return this.tab === tab;
    };

});

＆＃13;

li {width: 100px;}

＆＃13;

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

<section ng-app="demo" ng-controller="PanelController as panel">
    <ul class="nav nav-pills">
        <li ng-class="{active: panel.isActive(1)}">
            <a ng-click="panel.setTab(1)" href="#">1</a>
        </li>
        <li ng-class="{active: panel.isActive(2)}">
            <a ng-click="panel.setTab(2)" href="#">2</a>
        </li>
        <li ng-class="{active: panel.isActive(3)}">
            <a ng-click="panel.setTab(3)" href="#">3</a>
        </li>
        <li ng-class="{active: panel.isActive(4)}">
            <a ng-click="panel.setTab(4)" href="#">4</a>
        </li>
    </ul>
    <h1>{{tab}}</h1>
    <div class="panel">
        <p ng-show="panel.tab===1">Suppose this is Data coming from object for 1 </p>
        <p ng-show="panel.tab===2">Suppose this is Data coming from object for 2 </p>
        <p ng-show="panel.tab===3">Suppose this is Data coming from object for 3 </p>
        <p ng-show="panel.tab===4">Suppose this is Data coming from object for 4 </p>
    </div>
</section>

＆＃13;

Answer 3

试试这个：

(function(){
    var app = angular.module("panel",[]);
    app.controller('PanelController',function($scope){
          $scope.tab = 1;

          $scope.setTab = function(setTab){
                $scope.tab = setTab;
          };

    });
})();

和

 <li ng-class="{active:tab === 1}"><a ng-click="setTab(1)" href="#">1</a></li>

为什么没有访问控制器内部的这个功能和属性？

3 个答案: