Question

我有一个使用AngularJS和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使用wanTohide隐藏该div类。当然ui-sref点击它已将其内容加载到ui-view。

- 我希望功能Home Page按钮。<a href="">Home Page</a>

Answer 1

您可以$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;
}

Ui-router嵌套状态，显示：无

1 个答案: