cari

Rumah  >  Soal Jawab  >  teks badan

angular.js - Apabila angularjs menggunakan penghalaan untuk melompat ke paparan, bagaimana untuk melaksanakan js untuk mengubah suai item menu navigasi untuk menjadi aktif?

Apabila angularjs menggunakan penghalaan untuk melompat ke paparan tertentu, bagaimana saya boleh melaksanakan js untuk mengubah suai item menu navigasi untuk menjadi aktif. Berikut ialah kod semasa saya

<script type="text/javascript"> var mainapp = angular.module('mainapp', ['ngRoute']); mainapp.config(function(${routeProvider}) { ${routeProvider} .bila('/', { templateUrl: 'marry.php?cid=123&view=home', pengawal: 'mainController' }) .bila('/home', { templateUrl: 'marry.php?cid=123&view=home', pengawal: 'mainController' }) .bila('/proses', { templateUrl: 'marry.php?cid=123&view=process', pengawal: 'mainController' }) .bila('/message', { templateUrl: 'marry.php?cid=123&view=message', pengawal: 'mainController' }); }); mainapp.controller('mainController', function(${skop}) { ${scope}.message = 'Semua orang datang dan lihat betapa cantiknya saya!'; }); </skrip>
曾经蜡笔没有小新曾经蜡笔没有小新2801 hari yang lalu834

membalas semua(3)saya akan balas

  • 漂亮男人

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

    Kod anggaran: 

    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>

    Jika anda ingin melihat beberapa contoh dan dokumentasi, saya juga mempunyainya di github
    Sumber pembelajaran: https://github.com/dolymood/AngularLearing
    Contoh mudah: https://github.com/dolymood/angular-example
    Muat turun pakej dan dokumentasi https://github.com/dolymood/angular-packages

    balas
    0
  • 習慣沉默

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

    Letakkan kesan pengaktifan pada setiap item menu terlebih dahulu, tetapi jangan paparkannya

    Kemudian hantar nilai khusus ke halaman hadapan untuk memaparkan status pengaktifan tertentu;

    Contohnya

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

    Anda hanya perlu menghantar nilai tab yang sepadan dalam pengawal

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

    Atau gunakan kaedah ini

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

.active{
    ...
}

    Kawal nilai benar/salah isActive dalam pengawal sudut

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

    Helo, saya tidak begitu mahir dengan angularjs Projek kami hanya menggunakan fungsi penghalaan angularjs. Bolehkah anda membantu saya mengubahnya secara langsung berdasarkan kod di atas

    balas
    0
  • Batalbalas