Jquery和AngularJS路線

我沒有很長的網絡編程經驗。現在我遇到了Angular路由和jquery事件的問題。在主網頁我展示導航欄，當我滾動使用此腳本：Jquery和AngularJS路線

<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簡約路線。當我加載其他網站時，這個導航欄是可見的，因爲'if'指令是真實的。如果我不想在加載的頁面上使用上述腳本，我該怎麼辦？我想過角度控制器，但我沒有一個想法，如何在沒有jQuery的情況下采用滾動位置。

來源

2015-11-19 Michał Styś

也許這可以幫助你。如果用戶向下滾動（一頁網站），我會縮小導航欄。我用這個（我複製它的地方，但沒有找到它）：

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

這是你如何處理指令中的滾動位置。我希望它能幫助你。

來源

2015-11-19 17:19:46 Ore

如果你想利用滾動值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做一些工作。

來源

2015-11-19 17:33:35

Jquery和AngularJS路線

回答

相關問題