2016-09-02 2 views
0

Я пытаюсь сделать простое приложение с угловым, и я не могу понять, как скрыть содержимое, когда я нажимаю ссылки в панели навигацииУгловая содержание шкуры на ссылку нажмите

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

Когда я нажимаю средний логотип, я хочу, чтобы содержимое тела в этом случае «Не показывать» должно быть скрыто и отображать шаблон, который я использую на теле. Спасибо

ответ

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

+0

Я уже потребляя нг щелкните при нажатии на ссылку, чтобы отобразить шаблон, я могу как-то объединить эти два? Я хочу скрыть эту часть И показать шаблон/контент. – Nex

+0

Извините, что я не знаком с угловым, я хочу, чтобы выделенный текст был скрыт, когда я нажимаю какую-либо ссылку в навигационной панели следующим образом: https://i.gyazo.com/9960ebe595ef7aa8d03596ef801faa58.gif – Nex

+0

Я все еще не могу понять, как сделайте это, на ссылке перехода я могу показать шаблон с ng-include, но когда я нажму, я хочу, чтобы ng-hide = «hideSection» скрывалась, но сохраняйте шаблон на виду. – Nex

Смежные вопросы