Question

成为角色的新手，我正在努力实现以下目标：

当我在主页上滚动时更改导航栏的background-color，当我在其他页面上时，将其更改为固定的background-color。

为了实现以下目标，我创建了一个scroll指令，如下所示：

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();
      });
    };
});

我正在考虑检查此指令中的location，如果location与我的主页不同，那么我会将background-color修复到我的导航栏。是否有更逻辑，更清洁的方式来实现我想做的事情？

Answer 1

这样做的好方法是使用ng-controller和$location。

例如：

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

并在控制器中：

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

Answer 2

如果您正在使用ui-router，最好的方法是使用isState过滤器：

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

这样，您就不必在控制器中创建任何内容来检查您是否在正确的页面上。

根据页面更改导航栏背景颜色

2 个答案: