搜尋

首頁  >  問答  >  主體

angular.js - angularjs使用路由跳到某個view的時候，如何執行js來修改一個導航選單某一項為啟動狀態

angularjs使用路由跳到某個view的時候，如何執行js來修改一個導航選單某一項為啟動狀態，下面是我現在的程式碼

曾经蜡笔没有小新曾经蜡笔没有小新2744 天前797

全部回覆(3)我來回復

  • 漂亮男人

    漂亮男人2017-05-15 16:54:00

    大概代碼：

    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

    回覆
    0
  • 習慣沉默

    習慣沉默2017-05-15 16:54:00

    預先在每個選單項目上放好啟動狀態的效果，但是不顯示；

    然後透過將特定的值傳到前台頁面來讓特定的啟動狀態顯示；

    例如

    <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

    回覆
    0
  • 阿神

    阿神2017-05-15 16:54:00



    <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的路由功能，上面是我的程式碼，能幫我基於上面程式碼直接改好嗎

    回覆
    0
  • 取消回覆