AngularJS切换下拉菜单(AngularJS Toggle Dropdown Menu)

AngularJS切换下拉菜单(AngularJS Toggle Dropdown Menu)

我正在尝试使用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

I am trying to toggle a menu item using AngularJS. I am trying to understand what I am doing wrong because the following is not working.

<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>

I have the following app.js file. I am using a nested controller to learn the concept.

(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"; });

}());

I have created a plunk: http://plnkr.co/edit/xJ3uDK5Mk8xEZY15Odmt?p=info

最满意答案

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

查看有关Mozilla功能的文档，其中说明：

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

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

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

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

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

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

The issue is that you pass firstCtrl.navOpen by value to toggle() and then manipulate the new variable navOpen inside the function, but it never gets assigned back to the firstCtrl.navOpen that the view is using.

Check out the documentation for functions on Mozilla, which states:

Primitive parameters (such as a number) are passed to functions by value; the value is passed to the function, but if the function changes the value of the parameter, this change is not reflected globally or in the calling function.

In your case the parameter is a boolean, which is also primitive, and thus passed by value.

You could get your example to work as expected without calling a function at all by changing the <button> element:

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

edit: I also just noticed that the function toggle is also never getting called in your example because it is not a property of firstController. In order to use a function as you have in your example, it would need to be defined as a member of this like so:

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