ger*_*dtf 3 javascript jquery angularjs angularjs-scope angular-ui-router
我正在使用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;}
谢谢,
格尔德
更新:@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");
更新:我使用父状态进行了插件,该状态根据$ state.includes('main.home')控制滑块启用/禁用
http://plnkr.co/edit/eT1MW0IU53qfca6sGzOl?p=preview
| 归档时间： |
|
| 查看次数： |
6069 次 |
| 最近记录： |