附加到页脚元素的ng-if表达式" clicked"当应用程序首次启动时,我希望它会被角度评估为false。
当按钮" class = menuLeft"点击,它点击即可更改"点击"如headerCtrl menuToggle()中所述,为true,以便通过单击按钮,用户可以将页脚从显示切换到隐藏,反之亦然。
代码没有做到预期,请帮忙。谢谢。
//---headerCtrl.js--------------------------------
(function () {
'use strict';
angular
.module('appModule')
.controller('HeaderCtrl', ['$scope', HeaderCtrl]);
function HeaderCtrl($scope) {
$scope.menuToggle = menuToggle;
function menuToggle() {
$parents.clicked = true;
}
}
})();

//---index.html-----------------------------
<!doctype html>
<html lang="en" ng-app="appModule">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<base href="http://localhost:63342/angOne/">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.5.0-rc.1/angular-animate.js"></script>
<script src="app.js"></script>
<script src="services/routing.js"></script>
<script src="controllers/mainMenuCtrl.js"></script>
<script src="controllers/headerCtrl.js"></script>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<header ng-controller="HeaderCtrl">
<button class="menuLeft" type="button" ng-model="clicked" ng-click="menuToggle()">☰</button>
<label id="pageTitle" class="pageTitle">Select item from list</label>
<button class="menuRight" type="button">⋮</button>
</header>
<main ng-view></main>
<footer ng-if="clicked">
<ul class="horizontal-style">
<li><button type="button">NO</button></li>
<li><button type="button">EXTRA</button></li>
<li><button type="button">YES</button></li>
</ul>
</footer>
</body>
</html>
&#13;
答案 0 :(得分:0)
Header
和Footer
具有不同的范围。
如果您希望他们进行沟通,可以通过常见的service
:
angular
.module('appModule', [])
.factory('TogglerFactory', function($rootScope) {
var TogglerFactory = {};
TogglerFactory.menuToggle = function(){
$rootScope.clicked = !$rootScope.clicked;
}
return TogglerFactory;
});
然后将该工厂注入Header
和Footer
控制器:
.controller('Header/Footer Ctrl', ['$scope', 'TogglerFactory', HeaderCtrl]);
function HeaderCtrl($scope, Toggler) {
$scope.menuToggle = Toggler.menuToggle;
}
}]);
或者使用$rootScope
:
(function() {
'use strict';
angular
.module('appModule', [])
.controller('HeaderCtrl', ['$scope', '$rootScope', HeaderCtrl]);
function HeaderCtrl($scope, $rootScope) {
$scope.menuToggle = function() {
$rootScope.clicked = !$rootScope.clicked;
}
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<body ng-app="appModule">
<header ng-controller="HeaderCtrl">
<button class="menuLeft" type="button" ng-click="menuToggle()">☰</button>
<label id="pageTitle" class="pageTitle">Select item from list</label>
</header>
<main ng-view></main>
<footer ng-if="clicked">
<ul class="horizontal-style">
<li>
<button type="button">NO</button>
</li>
<li>
<button type="button">EXTRA</button>
</li>
<li>
<button type="button">YES</button>
</li>
</ul>
</footer>
</body>