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

Question

I am using Angular JS and UI-Routing. The routing works fine. My problem is showing and hiding a slider depending on what page the user is on.

My index.html looks something like this:

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

my app.js looks like this:

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()

Now I tried to include the slider in the home.html template but then it does not properly work due to initialisation requirements. When I use a controller in the different routes it is out of scope. So how do I pass a variable referring to the state to a controller indepent of the route so I can use it for it something like

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

Thanks,

Gerd

UPDATE: @Chris T

I have added this to my app.js:

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

}else{
    $scope.showIt=false;
}
 }])

Then I applied the controller to a div I wrapped around the slider and used

 ng-show="showIt"

Chris T · Accepted Answer · 2014-06-16 01:12:18Z

5

Inject $state into your controller. Then check if $state.includes("home");

Update: I made a plunk with a parent state which controls the slider enabled/disabled based on $state.includes('main.home')

http://plnkr.co/edit/eT1MW0IU53qfca6sGzOl?p=preview

edited Jun 16, 2014 at 1:12

answered Jun 7, 2014 at 4:22

Chris T

8,2262 gold badges32 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

gerdtf Over a year ago

Thanks Chris, I got it to work but only in the .config of the ui-routing... which then has a controller and a scope outside of the slider part in the HTML... I get an error when I try to create a new controller and pass in $state outside of the ui-router config. Any suggestions of what might be wrong or how I pass my result to another controller?

Chris T Over a year ago

Can you show me how you are creating the controller and injecting $state?

gerdtf Over a year ago

I have added the controller as an update to the original question.Thanks for your help!

Chris T Over a year ago

I understand the question better now. You have a couple of options. Your slider is operating outside of a controller context. You could embed the logic directly in the markup, using $rootScope to access $state (meh): plnkr.co/edit/SkiBwv3uxghsT4UYUQ9j?p=preview or you could create a parent state (better) with a controller.

Chris T Over a year ago

.js and .css added directly to the main page (index.html) is added to the global scope (window) and should be available for use within ui-router views. Does your slider and youtube control require javascript to be run in order to initialize them? If so, you may need to put the initialization code in an appropriate place. You might want to wrap the init code in a directive, for instance.

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related