Ändern navbar Hintergrund-Farbe abhängig von der Seite

Question

Sein neues, eckig, ich versuche, das zu erreichen, folgende:

Ändern Sie den background-color meiner navbar, wenn ich in meiner Homepage verschiebe, und lassen Sie es auf einen festen background-color wenn ich auf den anderen Seiten bin.

folgendes zu erreichen, habe ich eine scroll Richtlinie wie folgt aus:

app.directive("scroll", function ($window,$location) { 
    return function(scope, element, attrs) { 
     angular.element($window).bind("scroll", function() {   
     if (this.pageYOffset > 0) { 
      scope.backgroundCol = "black"; 
     } else { 
      scope.backgroundCol = "transparent"; 
     } 
     scope.$apply(); 
     }); 
    }; 
}); 

ich die location in dieser Richtlinie zu prüfen dachte, und wenn der location unterscheidet sich von meiner Homepage, dann würde ich fix a background-color zu meiner Navbar. Gibt es einen logischeren und saubereren Weg, um das zu erreichen, was ich tun möchte?

Answer 1

Ein guter Weg, es zu tun wäre ng-controller zusammen mit $location zu verwenden.

Zum Beispiel:

<div ng-controller="homepageController"> 
    <nav class="navbar navbar-default" ng-class="{ navbar-custom: isHomepage('/')}"> 
    </nav> 
</div> 

und in der Steuerung:

function homepageController($scope, $location) { 
    $scope.isHomepage = function (currentLocation) { 
     return currentLocation === $location.path(); 
    }; 
} 

Answer 2

Wenn Sie ui-router die beste Art und Weise verwenden ist, um die isState Filter zu verwenden:

<nav class="navbar navbar-default" ng-class="{'navbar-custom': ('app.home' | isState)}"></nav> 

Diese So müssen Sie nichts in Ihrem Controller erstellen, um zu überprüfen, ob Sie auf dem r sind eine helle Seite.