问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

angularjs中的随页面变化的导航

头像
JsStyle
    60518126163

    项目现在用的是angular（1.x）。自己写了一个导航指令，但是导航在路由逻辑之外

    clipboard.png

    在ng-view外面，现在想让导航条随着页面url的变化，有一个指示（就是表示在当行的哪一个栏目）。

    clipboard.png

    我在推荐就推荐变灰，我在视频就视频变灰

    我的办法是每一个控制器的最前面写一个 scope.selectNav变成对应的数字（例如在视频selectNav为3），然后在导航指令中用ng-class控制，可是由于指令写在控制器之外，每次路由切换指令不会重载，有没有什么办法可以让selectNav一改变，导航指令的样式就跟着改变

    javascriptnode.jshtml5
    阅读 3.2k
    1 个回答
    得票最新
    头像
    abby_mrs
      51033147
      ✓ 已被采纳

      看看这是不是你要的：

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

      tab.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;}
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题