communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
angulaire.js - Lorsque Angularjs utilise le routage pour accéder à une vue, comment exécuter js pour modifier un élément du menu de navigation afin qu'il soit actif ?
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-05-15 16:52:00
0
3
817

Lorsque Angularjs utilise le routage pour accéder à une certaine vue, comment puis-je exécuter js pour modifier un élément du menu de navigation pour qu'il soit actif

<script type="text/javascript"> var mainapp = angulaire.module('mainapp', ['ngRoute']); mainapp.config(function(${routeProvider}) { ${routeProvider} .quand('/', { templateUrl : 'marry.php?cid=123&view=home', contrôleur : 'mainController' }) .quand('/home', { templateUrl : 'marry.php?cid=123&view=home', contrôleur : 'mainController' }) .quand('/processus', { templateUrl : 'marry.php?cid=123&view=process', contrôleur : 'mainController' }) .quand('/message', { templateUrl : 'marry.php?cid=123&view=message', contrôleur : 'mainController' }); }); mainapp.controller('mainController', function(${scope}) { ${scope}.message = 'Tout le monde vient voir à quel point je suis beau !'; }); </script>
曾经蜡笔没有小新
曾经蜡笔没有小新

répondre à tous(3)
漂亮男人
漂亮男人2017-05-15 16:54:00 3 plancher

Code approximatif : 

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>

Si vous souhaitez voir quelques exemples et de la documentation, je les ai aussi sur github
Ressources d'apprentissage : https://github.com/dolymood/AngularLearing
Exemple simple : https://github.com/dolymood/angular-example
Téléchargez les packages et la documentation https://github.com/dolymood/angular-packages

Comme +0
Ajouter une réponse
習慣沉默
習慣沉默2017-05-15 16:54:00 2 plancher

Placez l'effet d'activation sur chaque élément du menu à l'avance, mais ne l'affichez pas

;

Transmettez ensuite la valeur spécifique à la page d'accueil pour afficher l'état d'activation spécifique

Par exemple

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

Il vous suffit de passer la valeur de tabulation correspondante dans le contrôleur

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

Ou utilisez cette méthode

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

.active{
    ...
}

Contrôlez la valeur vrai/faux de isActive dans le contrôleur angulaire

Comme +0
Ajouter une réponse
阿神
阿神2017-05-15 16:54:00 1 plancher 


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

Bonjour, je ne connais pas très bien Angularjs. Notre projet utilise uniquement la fonction de routage d'Angularjs. Pouvez-vous m'aider à le modifier directement en fonction du code ci-dessus ?

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal