Question

我正在尝试用角度创建一个简单的应用程序，当我点击导航栏中的链接时，我似乎无法隐藏内容

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

主控制器：

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

当我点击中间徽标时，我想要在这种情况下的身体内容＆＃34;不得显示＆＃34;应隐藏并显示我在身体上使用的模板。感谢

Answer 1

您需要将可见性绑定到某个范围变量;表明你可以使用：

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

在您的控制器中，您可以定义函数showTemplate，如：

$scope.showTemplate = function(templateName, hideContent) {
  $scope.template = templateName;  //template to show
  $scope.hideSection = hideContent;  //true or false to hide/show the content
}

在此功能中，您可以设置可见模板并隐藏其他部分。然后，您需要将要隐藏的部分绑定到hideSection变量：

<div ng-hide="hideSection">
    <H1> must not show</H1>
</div>

单独

ng-hide没有任何变量绑定将无法正常工作

链接点击上的角度隐藏内容

1 个答案: