AngularJS - UI-Routing -如何在控制器中使用路由状态作为变量

AngularJS - UI-Routing - how to use the route state as variable in controller?

本文关键字：路由 状态 变量 UI-Routing 控制器 AngularJS      更新时间：2023-09-26

我使用的是Angular JS和UI-Routing。路由工作正常。我的问题是显示和隐藏滑动条取决于用户在哪个页面。

我的index.html看起来像这样:

<body ng-app="myApp">
<header ng-include="'templates/header.html'"></header>
<div>Code for slider</div>

<!--=== Content Part ===-->
<div class="container"> 
<div class="row" >
    <div ui-view autoscroll="false"></div>
</div>

</div><!--/container-->     
<!-- End Content Part -->
<footer ng-include="'templates/footer.html'"></footer>

我的app.js是这样的

angular
.module('myApp', ['ui.router'])
.config(['$urlRouterProvider','$stateProvider',function($urlRouterProvider,$stateProvider){
    $urlRouterProvider.otherwise('/');
    $stateProvider
        .state('home',{
            url: '/',
            templateUrl: 'templates/home.html'
        })
        .state('about',{
            url: '/about',
            templateUrl: 'templates/about.html'
        })
        .state('contact',{
            url: '/contact',
            template: 'CONTACT'
        })
}])
.controller()

现在我试图在home.html模板中包含滑块，但由于初始化要求，它不能正常工作。当我在不同的路由中使用控制器时，它超出了范围。那么，我如何将一个指向状态的变量传递给一个独立于路由的控制器这样我就可以使用它了比如

if (state==home) {
   $scope.showSlider==true;
}else{ $scope.showSlider==false;}

谢谢,Gerd

更新:@Chris T

我已经添加到我的app.js:

 .controller('myController',['$scope', '$state', function($scope,$state){
if ($state.includes('home')){
    $scope.showIt=true;
}else{
    $scope.showIt=false;
}
 }])

然后我将控制器应用到一个div上，我将滑块包裹起来，并使用

 ng-show="showIt"

在控制器中注入$state。然后检查$state.includes("home");

更新:我制作了一个带有父状态的plunk，它根据$state.includes('main.home')

控制滑动条的启用/禁用。

http://plnkr.co/edit/eT1MW0IU53qfca6sGzOl?p =预览

相关文章：