Question

我正在尝试使用AngularJS切换菜单项。我试图理解我做错了什么，因为以下是行不通的。

<div ng-controller="firstController as firstCtrl">
    <button type="button" class="btn btn-default" aria-label="Menu" ng-click="firstCtrl.toggle(firstCtrl.navOpen)">
        <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
    </button>
    <ul ng-show="firstCtrl.navOpen" class="nav nav-pills nav-stacked">
        <li>One</li>
        <li>Two</li>
    </ul>


    <p>{{firstCtrl.test1}}</p>
    <div ng-controller="secondController as secondCtrl">
        <p>{{secondCtrl.test1}}</p>
    </div>
</div>
<script src="app.js"></script>

我有以下app.js文件。我正在使用嵌套控制器来学习这个概念。

(function () {
var app = angular.module("PHPAngularJSDemo", []);

app.controller("firstController", function () {
    this.test1 = "Sanjay1";
    this.navOpen = false;

    var toggle = function (navOpen) {
        if (navOpen === false) {
            navOpen = true;
        } else
            navOpen = false;
    };

});

//nested controller
app.controller("secondController", function () {
    this.test1 = "Sanjay2";
});

}（））;

我创建了一个插件：http://plnkr.co/edit/xJ3uDK5Mk8xEZY15Odmt?p=info

Answer 1

问题是您将firstCtrl.navOpen按值传递给toggle()，然后在函数内操作新变量navOpen，但它永远不会被分配回firstCtrl.navOpen视图正在使用。

查看functions on Mozilla的文档，其中说明：

原始参数（例如数字）按值传递给函数;该值将传递给函数，但如果函数更改了参数的值，则此更改不会全局或在调用函数中反映。

在你的情况下，参数是一个布尔值，它也是原始的，因此通过值传递。

您可以通过更改<button>元素，让您的示例按预期工作，而无需调用函数：

<button class="btn btn-default" aria-label="Menu" type="button" ng-click="firstCtrl.navOpen = !firstCtrl.navOpen">

修改我还注意到，在您的示例中也永远不会调用函数切换，因为它不是firstController的属性。为了使用您的示例中的函数，需要将其定义为this的成员，如下所示：

this.toggle = function () { this.navOpen = !this.navOpen; };

AngularJS切换下拉菜单

1 个答案: