1
初心者angularjsです。新しいものを学ぼうとしています。ルーティング付き角度jsでアクティブメニューを設定する
私は単純なページを持っており、ユーザーが別のページに移動するときにはactiveクラスをのmenuitemに設定する必要があります。以下は私がルートを追加した方法です。
angular.module('home', ["ngRoute"]).
config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/home', { templateUrl: 'partials/home.html', controller: "homeController", activetab: "home" }).
when('/about', { templateUrl: 'partials/about.html', activetab: "about" }).
when('/gallery', { templateUrl: 'partials/gallery.html', activetab: "gallery" }).
when('/contact', { templateUrl: 'partials/contact.html', activetab: "contact" }).
when('/services', { templateUrl: 'partials/services.html', activetab: "services" }).
when('/house', { templateUrl: 'partials/house.html', activetab: "house" }).
otherwise({ redirectTo: '/home', templateUrl: 'partials/home.html', activetab: "home" });
$locationProvider.html5Mode(true);
}).controller("homeController", function ($scope, $http, $route) {
$scope.$route = $route;
});
homecontrollerは、ユーザーがホームページにアクセスしたときにのみバインドされます。他のページには静的なデータしかありません。
私は以下のように私のhtmlにng-appを追加しました：
<html ng-app="home">
は、私がliにactiveクラスを追加しようとしました方法です。
<ul class="nav navbar-nav">
<li ng-class="{'active': $route.current.activetab == 'home'}"><a href="home">Home <span class="sr-only">(current)</span></a></li>
<li ng-class="{'active': $route.current.activetab == 'about'}"><a href="about">About</a></li>
<li ng-class="{'active': $route.current.activetab == 'services'}"><a href="services">Services</a></li>
<li ng-class="{'active': $route.current.activetab == 'house'}"><a href="house">The house</a></li>
<li ng-class="{'active': $route.current.activetab == 'gallery'}"><a href="gallery">Gallery</a></li>
<li ng-class="{'active': $route.current.activetab == 'contact'}"><a href="contact">Contact</a></li>
</ul>
しかし、私はこれを完了するのに運がなかった。ナビゲーションが発生しても、アクティブなクラスは追加されません。私はanswer mentioned in this postに続きました。私がこれを達成できるか、私の間違いは何ですか？
はい。それが問題でした。私は別のアプローチに従った。インデックスページにコントローラをバインドしました..今それはうまく動作し、ursも..ありがとう.. –