search

Home  >  Q&A  >  body text

angular.js - When angularjs uses routing to jump to a view, how to execute js to modify a navigation menu item to be active?

When angularjs uses routing to jump to a certain view, how can I execute js to modify a navigation menu item to be active? The following is my current code

<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>
曾经蜡笔没有小新曾经蜡笔没有小新2814 days ago841

reply all(3)I'll reply

  • 漂亮男人

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

    Approximate code: 

    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>

    If you want to see some examples and documents, they are also available on my github
    Learning resources: https://github.com/dolymood/AngularLearing
    Simple example: https://github.com/dolymood/angular-example
    Download packages and documentation https://github.com/dolymood/angular-packages

    reply
    0
  • 習慣沉默

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

    Place the activation effect on each menu item in advance, but do not display it;

    Then pass the specific value to the front page to display the specific activation status;

    For example

    <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>

    You just need to pass the corresponding tab value in the controller

    $scope.tab = 1 // 显示第一个为激活状态

    Or use this method

    <p ng-class='{active:isActive'>

.active{
    ...
}

    Control the value true/false of isActive in angular controller

    reply
    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>

    Hello, I am not very familiar with angularjs. Our project only uses the routing function of angularjs. The above is my code. Can you help me directly modify it based on the above code?

    reply
    0
  • Cancelreply