Community Learn Tools Library Leisure
search
English
angular.js - When angularjs uses routing to jump to a view, how to execute js to modify a navigation menu item to be active?
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-05-15 16:52:00
0
3
826

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

reply all(3)
漂亮男人
漂亮男人2017-05-15 16:54:00 3 floor

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

Like +0
Add Reply
習慣沉默
習慣沉默2017-05-15 16:54:00 2 floor

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

Like +0
Add Reply
阿神
阿神2017-05-15 16:54:00 1 floor 


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

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template