Jquery 和 AngularJS 路由答案

【问题标题】：Jquery and AngularJS routesJquery 和 AngularJS 路由
【发布时间】：2016-02-21 22:29:41
【问题描述】：

我没有长期的网络编程经验。现在我遇到了 Angular 路由和 jquery 事件的问题。在主页中，当我使用此脚本滚动时显示导航栏：

<script type="text/javascript">
        $(document).scroll(function() {
        "use strict";
        if($(this).scrollTop() >= $('#slider').height())
        {
           $('#header').addClass('header_fixed animated fadeInDown');
           $('.logo').addClass('logo_fix');
           $('.nav-collapse').addClass('nav-collapse_margin_top');
           $('#header_cotact_icon').hide();
           $('#header_navigation').addClass('header_navigation_fixed');
           $('.logo').addClass('widd');
           $('#wrap').addClass('body-margin-top-20');
        }
        if ( $(window).scrollTop() < $('#header').height())
            {
                $('#header').removeClass('header_fixed animatedfadeInDown');
                $('.logo').removeClass('logo_fix');
                $('#header_cotact_icon').show();
                $('#header_navigation').removeClass('header_navigation_fixed');
                $('.logo img').removeClass('widd');
                $('#wrap').removeClass('body-margin-top-20');
            }                        


    });

</script>

我还用 anuglar 实现了简单的路线。当我加载其他站点时，此导航栏可见，因为“如果”指令为真。如果我不想在加载的页面上使用上述脚本，我该怎么办？我考虑过角度控制器，但我不知道如何在没有 jquery 的情况下获取滚动位置。

【问题讨论】：

标签： javascript jquery html angularjs dom

【解决方案1】：

这可能对您有所帮助。如果用户向下滚动（一页站点），我会缩小导航栏。我用这个（我从某个地方复制它但没有找到它）：

index.html：

 <div class="" ng-controller="NavbarCtrl">
       <span scroll-position="scrollPos"></span>
       <nav class="navbar navbar-default navbar-fixed-top" ng-class="{'navbar-shrink': scrollPos > 1}">
         <div class="container">

NavbarCtrl：

angular.module('yourappname')
  .controller('NavbarCtrl', function($scope) {
    $scope.scrollPos = 0;
  });

指令：

angular.module('yourappname')
  .directive('scrollPosition', function ($window) {
    return {
      scope: {
        scrollPos: "=scrollPosition"
      },
      link: function (scope, element, attrs) {
        var windowElement = angular.element($window);
        var handler = function () {
          scope.scrollPos = windowElement.scrollTop();
        }
        windowElement.on('scroll', scope.$apply.bind(scope, handler));
        handler();
      }
    };
  });

这是您可以在指令中处理滚动位置的方法。我希望它对你有帮助。

【讨论】：

【解决方案2】：

如果您想在控制器内的Angular.js 中获取滚动值

app.controller('mainCtrl',function($scope,$window){
    angular.element($window).bind('scroll',function(){
        console.log($window.scrollY);
        //Rest of your logic
    });
});

$window 是围绕浏览器窗口对象的角度包装器。你可以使用$window.scrollX 和$window.scrollY 来做一些工作。

【讨论】：