Question

我的主页有一个完整的高度div，上面有一个视频。我的标题位于固定状态，在此视频顶部是透明的白色字母。当我向下滚动时，我正在计算窗口高度并使其具有带黑色字母的白色背景。

我的标题现在看起来像这样。

<header id="masthead" class="site-header onVideo" role="banner" menuscript>

当我滚动时，我在视频类上丢失了这个：

app.directive('menuscript', function ($window, $timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            var w = angular.element($window);

            w.bind('scroll', function(){
                if (w.scrollTop() < w.height() - $('#masthead').height()) {
                    $('#masthead').addClass("onVideo");
                }else{
                    $('#masthead').removeClass("onVideo");
                }
            });
        }
    }
});

这很好用。但是，如果客户更改页面或在不在家的页面上进入网站，我该怎么办？其他页面没有此视频。在所有其他页面上，标题应该是带有黑色字母的白色，或者没有onVideo类。滚动也需要禁用。他们回到主页后应该重新开始工作。

我已经把头撞到了墙上。

@TL; DR; 我需要的是当用户更改路由时从头和取消绑定滚动事件中删除一个类。检查目的地是否在家。如果它是home，则返回该类并将回滚绑定。如果没有，请保留没有该类的标题并取消绑定滚动。

Answer 1

看一下这个https://docs.angularjs.org/api/ngRoute/service/ $路线。您可以像这样使用$ routeChangeStart：

$rootScope.$on('$routeChangeStart', function(evt, next, current) {
  if (next) {
    if (next.templateUrl === 'home.html') {
      $rootScope.showVideo = true;
    } else{
      $rootScope.showVideo = false;
    }
  }
}

您可以使用此功能确定用户何时更改页面。您可以检查他们要移动到哪个页面，然后您可以在$ rootScope上设置一个变量，然后您可以在标题控制器中使用该变量来确定是否显示了视频和其他格式。

例如：

angular.module('myApp')
  .controller('CtrlHeader', function CtrlHeader($log, $rootScope, $scope) {

    $scope.showVideo = $routeScope.showVideo;
  });

AngularJS根据页面修改标题背景更改

1 个答案: