我有以下HTML文件：
<!DOCTYPE html>
<html ng-app="store">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="storeController as store">
<ul class="list-group">
<li class="list-group-item" ng-repeat="product in store.product">
<h3>
{{product.name}}
<em class="pull-right"> {{product.price | currency}}</em>
</h3>
<section ng-controller="tabController as tabCtrl">
<ul class="nav nav-pills">
<li ng-class="{active:tab===1}"> <a href ng-click="tabCtrl.setTab(1)"> Description</a> </li>
<li ng-class="{active:tab===2}"> <a href ng-click="tab =2"> Reviews</a> </li>
<li ng-class="{active:tab===3}"> <a href ng-click="tab =3"> Specs</a> </li>
</ul>
<div class="panel" ng-show="tab === 1">
<h4> Description</h4>
<p>{{product.description}}</p>
</div>
<div class="panel" ng-show="tab === 2">
<h4> Reviews</h4>
<blockquote>Not yet</blockquote>
</div>
<div class="panel" ng-show="tab === 3">
<h4> Specifications</h4>
<blockquote>Not yet</blockquote>
</div>
</section>
</li>
</ul>
</body>
</html>
以下是具有Angular模块和控制器的app.js：
(function(){
var app = angular.module("store",[]);
var gem = [
{
name: "Dodec",
price: 2.95,
canPurchase: true,
soldOut: false
},
{
name: "Panta",
price: 20.4,
canPurchase: true,
soldOut: false
}
];
app.controller("storeController",function(){
this.product = gem;
});
app.controller("tabController",function(){
this.tab = 1;
this.SetTab = function(value){
this.tab = value;
};
});
})();
问题是HTML没有读取第二个控制器tabController，因此this.tab = 1没有将tab初始化为1，setTab函数也没有工作。
请帮助，我出错了什么？
答案 0 :(得分：2)
这不是＆＃34;答案＆＃34;，但更多的是使用＆＃34;这个＆＃34;的最佳做法。你可能想要初始化这个＆＃39;到变量并稍后在控制器中修改它，以确保你在正确的范围内。
前：
app.controller("storeController",function(){
var self = this;
self.product = gem;
});
app.controller("tabController",function(){
var self = this;
self.tab = 1;
self.SetTab = function(value){
self.tab = value;
};
});
现在，要解决这个问题，请尝试使用$ scope而不是＆＃39;这个＆＃39;
app.controller("storeController",function($scope){
$scope.product = gem;
});
app.controller("tabController",function($scope){
$scope.tab = 1;
$scope.SetTab = function(value){
$scope.tab = value;
};
});
答案 1 :(得分：2)
问题很简单：这是你的ngClick处理程序：
ng-click="tabCtrl.setTab(1)"
这就是你定义控制器功能的方法：
this.SetTab = function(value) {
this.tab = value;
};
请注意，javascript setTab中的内容与SetTab不同。
另一个问题。如果您选择使用控制器作为语法，您还应修复ngClass和ngShow指令以使用控制器实例tab属性，而不是$scope属性：
ng-class="{active: tabCtrl.tab === 3}"
和
<div class="panel" ng-show="tabCtrl.tab === 2">
<h4>Reviews</h4>
<blockquote>Not yet</blockquote>
</div>