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