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"
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"
1 Answer
Reset to default 5Inject $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