javascript - angularjs中的随页面变化的导航
本文介绍了javascript - angularjs中的随页面变化的导航的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
项目现在用的是angular（1.x）。自己写了一个导航指令，但是导航在路由逻辑之外
在ng-view外面，现在想让导航条随着页面url的变化，有一个指示（就是表示在当行的哪一个栏目）。
我在推荐就推荐变灰，我在视频就视频变灰
我的办法是每一个控制器的最前面写一个 scope.selectNav变成对应的数字（例如在视频selectNav为3），然后在导航指令中用ng-class控制，可是由于指令写在控制器之外，每次路由切换指令不会重载，有没有什么办法可以让selectNav一改变，导航指令的样式就跟着改变
解决方案
看看这是不是你要的：
nav.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Nav</title> <link rel="stylesheet" href="css/nav.css"> </head> <body ng-app="navApp" ng-controller="navCtrl"> <div class="container"> <nav-bar></nav-bar> <div ui-view class="content"></div> </div> </body> <script src="angular/angular.js"></script> <script src="angular-ui-router/release/angular-ui-router.js"></script> <script src="js/nav.js"></script> </htmltab.html
<ul class="nav clearfix">
<li ng-repeat="tab in tabs"><a ui-sref="{{tab|lowercase}}" ui-sref-active="active">{{tab}}</a></li>
</ul>
nav.js
angular.module('navApp',['ui.router'])
.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home',{
url: '/home',
template: '<div>Welcome to home page!</div>'
})
.state('recommend',{
url: '/recommend',
template: '<div>recommend</div>'
})
.state('videos',{
url: '/videos',
template: '<div>videos</div>'
})
.state('shopping',{
url: '/shopping',
template: '<div>shopping</div>'
})
})
.directive('navBar', function(){
return {
restrict: 'EA',
scope:{},
templateUrl: '../views/tab.html',
controller: function($scope){
$scope.tabs = ['Home','Recommend','Videos','Shopping'];
}
}
})
.controller('navCtrl', function($scope){
})
app.js
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(express.static('./public'));
app.use(express.static('./node_modules'));
var PORT = process.env.PORT || 8000;
app.listen(PORT, ()=>{
console.log('server running on port: ' + PORT);
});
app.get('/nav', (req,res)=>{
res.sendFile(__dirname + '/public/views/nav.html');
});
nav.css
*{padding: 0;margin: 0;color: #333;}
ul{list-style: none;}
a{
color: inherit;
text-decoration: none;
}
.clearfix{zomm:1;clear: both;}
.clearfix:after{
content: "";
display: block;
clear: both;
overflow: hidden;
height: 0;
}
.container{
margin: 100px auto;
width: 400px;
border: 1px solid #ddd;
}
.nav{margin-bottom: 10px;border-bottom: 1px solid #ddd;}
.nav li{
float: left;
width: 25%;
box-sizing: border-box;
text-align: center;
border-right: 1px solid #ddd;
}
.nav li:last-child{border-right: 0;}
.nav li a{display: block;padding: 5px 0;}
.nav li a:hover{background-color: lightgray;}
.content{
min-height: 200px;
}
.active{background-color: lightgray;}
这篇关于javascript - angularjs中的随页面变化的导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
