为什么不能访问控制器内部的这个函数和属性?

use*_*589 3 javascript angularjs

app2.js

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

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


    });

})();
Run Code Online (Sandbox Code Playgroud)

而且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>
Run Code Online (Sandbox Code Playgroud)

单击panel.set(1)时未调用的问题<a>.为什么会这样?tab控制器内的属性都没有被访问.

Rod*_*son 5

panel.setTab被调用.问题是由tab模板中的变量引起的.你应该用它们替换它们panel.tab.

<section ng-controller="PanelController as panel"> 意思是

$scope.panel = new PanelController();
Run Code Online (Sandbox Code Playgroud)

所以如果你想在你的控制器中使用变量.你应该添加panel.前缀,否则就意味着$scope.tab