Javascript Angular.js第二个控制器不工作。_Javascript_Html_Angularjs

Javascript Angular.js第二个控制器不工作。

javascript html angularjs

Javascript Angular.js第二个控制器不工作。,javascript,html,angularjs,Javascript,Html,Angularjs,我有以下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/angula

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

问题是HTML没有读取第二个控制器tabController，因此this.tab=1没有将tab初始化为1，setTab函数也不起作用

请帮帮我，我做错了什么

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

例：

现在，为了解决这个问题，请尝试使用$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;
    };
});

例：

现在，为了解决这个问题，请尝试使用$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不同

另一个问题。如果您选择使用controller作为语法，则还应修复ngClass和ngShow指令，以使用controller实例

选项卡

属性，而不是

$scope

属性：

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

及


评论
还没有

演示：问题很简单：这是您的

ngClick

处理程序：

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

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

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

注意，在javascript中，setTab与setTab不同

另一个问题。如果您选择使用controller作为语法，则还应修复ngClass和ngShow指令，以使用controller实例

选项卡

属性，而不是

$scope

属性：

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

及


评论
还没有

演示：好的，试着使用$scope而不是。这个，看看它是否有用（$scope.tab=1；$scope.SetTab=…）我知道angular 1.3支持这个.variable符号，但是更改代码看看它是否有效。是的，它就是这样工作的，非常感谢。我似乎无法推翻你的答案！你能告诉我，这个图案是从哪里来的吗？直接把数据放在控制器上？我从学校的视频里得到的。这是一个错误的模式吗？该模式是允许的，但在angular 1.3（controller as）中是新的，因此大多数人仍然使用$scope，因为他们知道它，而使用controller as是不熟悉的。好吧，尝试使用$scope而不是。这将有助于（$scope.tab=1；$scope.SetTab=…）我知道angular 1.3支持这个变量表示法，但是改变代码看看它是否有效。是的，它是这样工作的，非常感谢。我似乎无法推翻你的答案！你能告诉我，这个图案是从哪里来的吗？直接把数据放在控制器上？我从学校的视频里得到的。这是一个坏模式吗？该模式是允许的，但在angular 1.3（controller as）中是新的，因此大多数人仍然使用$scope，因为他们知道它，并且使用controller as是不熟悉的。

self

很忙，有时用作当前窗口/帧，最好使用其他一些。然而，您只需使用局部变量，它无关紧要。我更喜欢

，

）

self

很忙，有时用作当前窗口/框架，最好使用其他窗口/框架。然而，您只需使用局部变量，它无关紧要。我更喜欢

那

）您好，您认为哪种语法更有效？我是指$scope还是控制器别名？我会使用“controller as”语法。但您也可以使用$scope。我更喜欢您当前的方式。您好，dfsq，您认为哪种语法更有效？我是指$scope还是控制器别名？我会使用“controller as”语法。但您也可以使用$scope。我更喜欢你现在的方式。