问题描述
angularjs使用路由跳转到某个view的时候，如何执行js来修改一个导航菜单某一项为激活状态，下面是我现在的代码
<script type='text/javascript'> var mainapp = angular.module(’mainapp’, [’ngRoute’]); mainapp.config(function(${routeProvider}) { ${routeProvider}.when(’/’, { templateUrl : ’marry.php?cid=123&view=home’, controller : ’mainController’}).when(’/home’, { templateUrl : ’marry.php?cid=123&view=home’, controller : ’mainController’}).when(’/process’, { templateUrl : ’marry.php?cid=123&view=process’, controller : ’mainController’}).when(’/message’, { templateUrl : ’marry.php?cid=123&view=message’, controller : ’mainController’}); }); mainapp.controller(’mainController’, function(${scope}) { ${scope}.message = ’Everyone come and see how good I look!’; });</script>问题解答
回答1：大概代码：
html<body ng-app='app'> <ul><li><a href='https://www.6hehe.com/wenda/14892.html#/' ng-class='{active:path==’/’}'>index</a></li><li><a href='https://www.6hehe.com/wenda/14892.html#/a' ng-class='{active:path==’/a’}'>a</a></li><li><a href='https://www.6hehe.com/wenda/14892.html#/b' ng-class='{active:path==’/b’}'>b</a></li> </ul> <p ng-controller='main'><p ng-view></p> </p> <script type='text/javascript'> var app = angular.module(’app’, [’ngRoute’]); app.config([’$routeProvider’, function($routeProvider) {$routeProvider .when(’/’, {template: ’/index’,controller: ’test’ }) .when(’/a’, {template: ’/a’,controller: ’test’ }) .when(’/b’, {template: ’/b’,controller: ’test’ }) .otherwise({redirectTo: ’/’ }); }]); app.run([’$rootScope’, ’$location’, function($rootScope, $location) {$rootScope.$on(’$routeChangeSuccess’, function(newV) { $rootScope.path = $location.path()}); }]); app.controller(’main’, [’$scope’, function($scope){ }]); app.controller(’test’, function() {}); </script></body>
如果想看一些示例和文档的话 我的github上也有学习资源：https://github.com/dolymood/AngularLearing简单示例：https://github.com/dolymood/angular-example下载包和文档 https://github.com/dolymood/angular-packages
回答2：预先在每个菜单项上放好激活状态的效果，但是不显示；
然后通过传特定的值到前台页面来让特定的激活状态显示；
比如
<span ng-show='tab == 1'></span><span ng-show='tab == 2'></span><span ng-show='tab == 3'></span><span ng-show='tab == 4'></span>
你在controller里传相应的tab值就行了
$scope.tab = 1 // 显示第一个为激活状态
或者用这个方法
<p ng-class=’{active:isActive’>.active{ ...}
angular controller中 控制isActive的值true/false
回答3：<script type='text/javascript'> var mainapp = angular.module(’mainapp’, [’ngRoute’]); mainapp.config(function(${routeProvider}) { ${routeProvider}.when(’/’, { templateUrl : ’marry.php?cid=123&view=home’, controller : ’mainController’}).when(’/home’, { templateUrl : ’marry.php?cid=123&view=home’, controller : ’mainController’}).when(’/process’, { templateUrl : ’marry.php?cid=123&view=process’, controller : ’mainController’}).when(’/message’, { templateUrl : ’marry.php?cid=123&view=message’, controller : ’mainController’}); }); mainapp.controller(’mainController’, function(${scope}) { ${scope}.message = ’Everyone come and see how good I look!’; });</script><ul class='ul_nav'><li ng-class='{active:path==’#/invitation’}'><a href='https://www.6hehe.com/wenda/14892.html#/invitation' class='nav_01'></a></li><li ng-class='{active:path==’#/map’}'><a href='https://www.6hehe.com/wenda/14892.html#/map' class='nav_02'></a></li></ul>
你好，我angularjs不太熟，我们项目只用了angularjs的路由功能，上面是我的代码，能帮我基于上面代码直接改好吗
