我正在尝试制作一个带 Angular 简单应用程序，但我似乎不知道如何在单击导航栏中的链接时隐藏内容
<body ng-controller="MainCtrl">
<div class="navbar-fixed ">
<nav>
<div class="nav-wrapper teal lighten-1">
<a href="#" class="brand-logo center waves-effect waves-light" ng-click="template='home.html'"><i class="material-icons">dashboard</i></a>
<ul class="left">
<li class="waves-effect waves-light"><a href="#" ng-click="template='discover.html'"><i class="material-icons">search</i></a>
</ul>
<ul class="right">
<li class="waves-effect waves-light"><a href="#" ng-click="template='profile.html'"><i class="material-icons">perm_identity</i></a>
</ul>
</div>
</nav>
</div>
<div ng-hide>
<H1> must not show</H1>
</div>
<div ng-include="template">
</div>
</body>
主 Controller :
var app = angular.module('Testing', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
var classApp = angular.module('classApp', []);
classApp.controller('classCtrl', function ($scope) {
$scope.isActive = false;
$scope.activeButton = function() {
$scope.isActive = !$scope.isActive;
}
});
当我单击中间 Logo 时，我希望在这种情况下“不得显示”主体内容应隐藏并显示我在主体上使用的模板。谢谢
最佳答案
您需要将可见性绑定(bind)到某个作用域变量；向您展示可以使用:
<a href="#" class="brand-logo center waves-effect waves-light" ng-click="showTemplate('home.html', true)"><i class="material-icons">dashboard</i></a>
要隐藏，您可以使用:
<li class="waves-effect waves-light"><a href="#" ng-click="showTemplate('discover.html', false)"><i class="material-icons">search</i></a>
在 Controller 中定义函数showTemplate，如下所示:
$scope.showTemplate = function(templateName, hideContent) {
$scope.template = templateName; //template to show
$scope.hideSection = hideContent; //true or false to hide/show the content
}
在此功能中，您可以设置可见模板并隐藏或隐藏其他部分。 然后您需要将要隐藏的部分绑定(bind)到 hideSection 变量:
<div ng-hide="hideSection">
<H1> must not show</H1>
</div>
ng-hide 单独没有任何变量绑定(bind)将不起作用
关于javascript - 单击链接时 Angular 隐藏内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39287836/