Jquery 和 AngularJS 路由

Posted 2023-05-09

【中文标题】Jquery 和 AngularJS 路由

【英文标题】：Jquery and AngularJS routes

【发布时间】：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 的情况下获取滚动位置。

【参考方案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 来做一些工作。