Ich lerne immer noch Angular und habe begonnen, eine einfache Website zu erstellen. Ich habe Routing und einige Logik aus meiner Sicht, eine aktive Klasse auf dem Menüpunkt zu haben, wenn die URL auf dieser Seite ist. Das Problem, das ich beginne zu sehen, ist, wenn ich die URL von/nach/nach Hause ändere, muss ich es im Routing und in der Ansicht und auch in der Logik aktualisieren, um zu sehen, ob es aktiv sein sollte.
Ich frage mich, gibt es einen besseren Weg, dies zu tun, um es trocken zu machen?
Meine app.js Datei sieht wie folgt aus:
angular.module('simpleApp', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home/index.html'
})
.when('/about', {
templateUrl: 'views/about/index.html',
controller: 'AboutController',
controllerAs: 'aboutCtrl'
})
.when('/services', {
templateUrl: 'views/services/index.html',
controller: 'ServicesController',
controllerAs: 'servicesCtrl'
})
.when('/contact', {
templateUrl: 'views/contact/index.html',
controller: 'ContactController',
controllerAs: 'contactCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
und Teilansicht meines index.html sieht wie folgt aus:
<nav class="navbar navbar-inverse" ng-controller="NavController as navCtrl">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/#/">SimpleApp</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ng-class="{ 'active': navCtrl.isActive('/')}">
<a href="/#/">Home</a>
</li>
<li ng-class="{ 'active': navCtrl.isActive('/about')}">
<a href="/#/about">About</a>
</li>
<li ng-class="{ 'active': navCtrl.isActive('/services')}">
<a href="/#/services">Services</a>
</li>
<li ng-class="{ 'active': navCtrl.isActive('/contact')}">
<a href="/#/contact">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
wie man sehen kann ich die isActive Methode aufrufen, auf der Nav-Controller, aber ich muss immer sicherstellen, dass die URL, die ich übergebe, korrekt ist.
das ist mein nav-Controller:
angular.module('simpleApp')
.controller('NavController', function($scope, $location) {
this.isActive = function (url) {
return url === $location.path();
};
});
mögliche Duplikate von [Set aktive Registerkarte Stil mit AngularJS] (http://StackOverflow.com/Questions/12295983/Set-Active-Tab-Style-With-angularjs) –
Ich glaube nicht, dass es ein Duplikat wie die Frage wurde beantwortet mit wie ich meinen Code schon geschrieben habe. Meine Frage ist, wie man es trocken macht. Alles, sei es eine der Antworten ist eine benutzerdefinierte Anweisung zu verwenden, so wird es sich anschauen. Vielen Dank, dass Sie mich darauf aufmerksam gemacht haben, weil ich nicht wusste, was ich hier googlen/suchen sollte, um sicherzugehen, dass ich nichts vervielfältige. – saunders
Ich zeigte auf die akzeptierte Antwort, die der beste Weg ist. Erfordert keine zusätzlichen Anweisungen oder Methoden. Sie fügen Ihrer Route einfach ein benutzerdefiniertes Attribut hinzu wie '.when ('/', { templateUrl: 'views/home/index.html', activetab: 'home' })' und dann in Ihrem html this '
' –