Раскрывающееся меню AngularJS Toggle

Question

Раскрывающееся меню AngularJS Toggle

0

Я пытаюсь переключить пункт меню, используя 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

jaykum 05 нояб. 2015, в 13:54

Источник

Теги:

angularjs

1 ответ

Ещё вопросы

cstricklan · Accepted Answer · 2015-11-05T10-00-00.000Z

Проблема в том, что вы передаете firstCtrl.navOpen по значению toggle() а затем манипулируете новой переменной navOpen внутри этой функции, но никогда не привязываетесь к firstCtrl.navOpen которую использует вид.

Ознакомьтесь с документацией для функций Mozilla, которая гласит:

Примитивные параметры (такие как число) передаются функциям по значению; значение передается функции, но если функция изменяет значение параметра, это изменение не отражается глобально или в вызывающей функции.

В вашем случае параметр является логическим, который также является примитивным и, таким образом, передается по значению.

Вы можете заставить свой пример работать как ожидалось, не вызывая функцию вообще, изменяя элемент <button>:

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

edit: Я также заметил, что функция toggle также никогда не вызывается в вашем примере, потому что она не является свойством firstController. Для того, чтобы использовать функцию, как у вас есть в вашем примере, то необходимо будет определить в качестве члена this вот так:

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

Спасибо за ваш быстрый ответ. Ваше решение в любом случае более элегантно. Я немного играл, пока учился на практике. Есть ли способ передать по ссылке в функцию? Что, если бы я хотел манипулировать «this.test1» внутри функции, можно ли это сделать?
Еще раз спасибо. Я понимаю первую ценную точку передачи по значению, а не по ссылке, и теперь вы помогли мне понять, как я делал это неправильно при вызове функции. Я пробовал «this.toggle» раньше, но все еще пытался передать переменную по ссылке. С обоими вашими ответами у меня гораздо лучшее понимание того, что я делаю неправильно. Ваша помощь очень ценится.
Я не знаю ни одного способа передать примитив по ссылке. Но вы можете превратить его в объект, который затем будет передан по ссылке. т.е. объявите this.nav={open: true} в firstController, а затем вы можете передать объект nav функции toggle (которая будет по ссылке) и изменить значение, например nav.open=!nav.open . Имеет ли это смысл?
Да, это имеет смысл. Еще раз спасибо. Помогает в моем понимании.