角度.js第二个控制器不工作

Angular.js second controller does not work.

本文关键字：工作控制器第二个 js 角度更新时间：2023-09-26

我有以下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>

这是具有角度模块和控制器的应用程序.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函数也不起作用。

请帮忙，我做错了什么？

这不是一个"答案"，而是使用"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;
    };
});

问题很简单：这是您的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>

角度.js第二个控制器不工作

Angular.js second controller does not work.

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