angularjs使用路由跳轉(zhuǎn)到某個(gè)view的時(shí)候，如何執(zhí)行js來修改一個(gè)導(dǎo)航菜單某一項(xiàng)為激活狀態(tài)，下面是我現(xiàn)在的代碼
<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>
3
0
0
大概代碼：
html<body ng-app="app"> <ul> <li><a href="#/" ng-class="{active:path=='/'}">index</a></li> <li><a href="#/a" ng-class="{active:path=='/a'}">a</a></li> <li><a href="#/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上也有
學(xué)習(xí)資源：https://github.com/dolymood/AngularLearing
簡(jiǎn)單示例：https://github.com/dolymood/angular-example
下載包和文檔 https://github.com/dolymood/angular-packages
預(yù)先在每個(gè)菜單項(xiàng)上放好激活狀態(tài)的效果，但是不顯示；
然后通過傳特定的值到前臺(tái)頁(yè)面來讓特定的激活狀態(tài)顯示；
比如
<span class="highlight" ng-show="tab == 1"></span>
<span class="highlight" ng-show="tab == 2"></span>
<span class="highlight" ng-show="tab == 3"></span>
<span class="highlight" ng-show="tab == 4"></span>
你在controller里傳相應(yīng)的tab值就行了
$scope.tab = 1 // 顯示第一個(gè)為激活狀態(tài)
或者用這個(gè)方法
<p ng-class='{active:isActive'>
.active{
...
}
angular controller中 控制isActive的值true/false
<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="#/invitation" class="nav_01"></a></li>
<li ng-class="{active:path=='#/map'}"><a href="#/map" class="nav_02"></a></li>
</ul>
你好，我angularjs不太熟，我們項(xiàng)目只用了angularjs的路由功能，上面是我的代碼，能幫我基于上面代碼直接改好嗎
