Angular.js第二个控制器不起作用。

Question

我有以下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函数也不起作用。

请帮助，我怎么了？

Answer 1

这不是“答案”，而是使用“ this”时的最佳实践。 您可能希望将“ this”初始化为变量，然后稍后在控制器中对其进行修改，以确保您位于正确的范围内。

例如：

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而不是'this'

app.controller("storeController",function($scope){
    $scope.product = gem;
});

app.controller("tabController",function($scope){
    $scope.tab = 1;
    $scope.SetTab = function(value){
        $scope.tab = value;
    };
});

Answer 2

问题很简单：这是您的ngClick处理程序：

ng-click="tabCtrl.setTab(1)"

这就是定义控制器功能的方式：

this.SetTab = function(value) {
    this.tab = value;
};

请注意，在javascript中， setTab与SetTab 。

另一个问题。 如果选择使用controller作为语法，则还应该修复ngClass和ngShow指令以使用controller实例的tab属性，而不是$scope属性：

ng-class="{active: tabCtrl.tab === 3}"

和

<div class="panel" ng-show="tabCtrl.tab === 2">
    <h4>Reviews</h4>
    <blockquote>Not yet</blockquote>
</div>

Angular.js第二个控制器不起作用。

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-11-26 18:18:44

解决方案2
2 2014-11-26 18:19:16

演示： http ： //plnkr.co/edit/8WOzHCuFaJzgSNTy5X0i？p = preview

Angular.js第二个控制器不起作用。

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-11-26 18:18:44

解决方案2 2 2014-11-26 18:19:16

演示： http ： //plnkr.co/edit/8WOzHCuFaJzgSNTy5X0i？p = preview

解决方案1
2 已采纳 2014-11-26 18:18:44

解决方案2
2 2014-11-26 18:19:16