Ui-router nested state with display:none

Question

I have a website setup with AngularJS and 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>

-When any of those ui-sref clicked I want to hide or display:none to that div class with wanTohide. Of course ui-sref clicked it has load its content to ui-view.

-I want to functional Home Page button.<a href="">Home Page</a>

Tarun Dugar Tarun Dugar · Accepted Answer · 2015-10-18T11:06:24

You can $stateChangeStart to achieve this. Basically, $stateChangeStart is fired whenever a state changes. Code:

app.js(where your app is defined) :

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

Ui-router nested state with display:none

1 Answers