接下来就看看Angular-UI-Router里的指令ui-sref-active 的使用
其意思就是查看当前激活状态并设置 Class
代码:
<!DOCTYPE html> <html ng-app="app"> <head> <title>嵌套视图</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css" type="text/css"></link> <style type="text/css"> .active1 { background-color: green!important; } </style> </head> <body> <div class="container"> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <ul class="nav navbar-nav"> <li ui-sref-active="active1" class=""><a class="navbar-brand" ui-sref="index1" >index1</a> </li> <li ui-sref-active="active1"><a class="navbar-brand" ui-sref="index2" >index2</a> </li> <li ui-sref-active="active1"><a class="navbar-brand" ui-sref="index3" >index3</a> </li> </ul> </div> </div> </nav> </div> <div ui-view></div> </body> <script type="text/javascript" src="../../plugins/angular/angular.min-1.4.6.js"></script> <script type="text/javascript" src="../../plugins/angular/angular-ui-router-0.2.10.js"></script> <script type="text/javascript"> var app = angular.module("app", [ 'ui.router' ]); app.config( [ '$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $stateProvider.state('index2', { url : '/index2', templateUrl : '/Angular/uiview/nested/index2.html' }).state('index1', { url : '/index1', templateUrl : '/Angular/uiview/nested/index1.html' }).state('index3', { url : '/index3', templateUrl : '/Angular/uiview/nested/index3.html' }); $urlRouterProvider.otherwise('/index2'); } ]).config(function($sceProvider) { $sceProvider.enabled(false); }); app.controller("view1_controller", function($stateParams) { alert($stateParams.param) }) </script> </html>
当我们点击index3跳转到index3页面时,菜单为选中状态。实际上是设置了ui-sref-active="active1"当选中后当前li标签的class被设置为active1,就是自己定义的actice1的样式