2015-10-18 4 views
0

У меня есть настройка сайта с помощью AngularJS и Ui-router.Ui-router вложенное состояние с дисплеем: нет

Index.html

<body> 

    <a href="#">Home Page</a> 

<div ui-view></div> 

</body> 

Javascript:

.config(function($stateProvider, $urlRouterProvider) { 

$stateProvider 
.state('baba', { 
url:"/", 
templateUrl: "baba.html" 
}) 
.state('icerik', { 
url: "/icerik/:ad", 
templateUrl: "icerik.html", 
controller: "mmgCtrl", 
}) 

.state('oku', { 
url: "/oku/:serix/:klasor", 
templateUrl: "oku.html", 
controller: "nbgCtrl" 
}) 

$urlRouterProvider.otherwise('/'); 

}) 

baba.html:

<div class="wanTohide> //div that want to hide when ui-sref clicked 

    <a ui-sref="oku">State oku</a> 
    <a ui-sref="icerik">State icerik</a> 

</div> 

-При любой из этих Ui-sref щелкнул Я хочу, чтобы скрыть или display:none к что div-класс с wanTohide. Конечно, ui-sref нажал, он загрузил его содержимое в ui-view.

-I хочу функционировать Home Page кнопка. <a href="">Home Page</a>

ответ

0

Для этого вы можете использовать $stateChangeStart. В основном, $stateChangeStart запускается всякий раз, когда изменяется состояние. Код:

app.js (где определяется ваше приложение):

app.run(run) //assuming app is a variable assigned 'angular.module('AppName', [])' 

function run($rootScope, $state) { 
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ 
     if(fromState.name == 'oku'|| fromState.name == 'icerik') { 
      angular.element('.wantToHide').addClass('hidden'); 
     } 
    }) 
} 

CSS:

.hidden { 
    display: none; 
} 
Смежные вопросы