app2.js
(function(){
var app = angular.module("panel",[]);
app.controller('PanelController',function(){
this.tab = 1;
this.setTab = function(setTab){
this.tab = setTab;
};
});
})();
And the view is:
<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正在访问控制器内部。
panel.setTab被调用。该问题是由tab模板中的变量。你应该将它们替换为panel.tab.
<section ng-controller="PanelController as panel">意思是
$scope.panel = new PanelController();
所以如果你想在控制器中使用变量。你应该添加panel.前缀，否则表示$scope.tab
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
