angularjs使用路由跳到某個view的時候,如何執行js來修改一個導航選單某一項為啟動狀態,下面是我現在的程式碼
大概代碼:
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>
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上也有 學習資源:https://github.com/dolymood/AngularLearing 簡單範例:https://github.com/dolymood/angular-example 下載套件和文件 https://github.com/dolymood/angular-packages
預先在每個選單項目上放好啟動狀態的效果,但是不顯示;
然後透過將特定的值傳到前台頁面來讓特定的啟動狀態顯示;
例如
<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裡傳相應的tab值就行了
$scope.tab = 1 // 显示第一个为激活状态
或用這個方法
<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不太熟,我們專案只用了angularjs的路由功能,上面是我的程式碼,能幫我基於上面程式碼直接改好嗎
大概代碼:
如果想看一些範例和文件的話 我的github上也有
學習資源:https://github.com/dolymood/AngularLearing
簡單範例:https://github.com/dolymood/angular-example
下載套件和文件 https://github.com/dolymood/angular-packages
預先在每個選單項目上放好啟動狀態的效果,但是不顯示;
然後透過將特定的值傳到前台頁面來讓特定的啟動狀態顯示;
例如
你在controller裡傳相應的tab值就行了
或用這個方法
angular controller中 控制isActive的值true/false
你好,我angularjs不太熟,我們專案只用了angularjs的路由功能,上面是我的程式碼,能幫我基於上面程式碼直接改好嗎