如何在頁面上實現基於位置的ng顯示

我是AngularJS的新手，似乎在解決如何自定義ng-show/ng-hide時遇到了問題。我希望下面的粘貼導航欄出現，一旦用戶在頁面上滾動600px。因爲我不能使用jQuery與角度，我有點困惑如何添加此功能。如何在頁面上實現基於位置的ng顯示

我目前正在連接到一個auth控制器，它有很多不相關的代碼，我沒有發佈它。

<nav ng-hide="true" class='homeNoAuth'> 
     <span class='nav navbar-fixed-top'> 
      <h1 id='homeLogo' ui-sref='home'>Title</h1> 
      <span class='navElement' ui-sref='signin'>Log In</span> 
      <span class='navElement' ui-sref='signup'>Sign Up</span> 
      <span class='navElement' ui-sref='about'>About</span> 

      <span class="search input-group"> 
       <input type="text" class="form-control" placeholder="Search for..."> 
       <span class="input-group-btn"> 
        <button class="btn btn-default" type="button"> 
         <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 
        </button> 
       </span> 
      </span> 
     </span> 
    </nav>

任何建議將是驚人的。謝謝！

來源

2015-10-20 Laura Weaver

你可以得到你正在尋找一個簡單的指令，看着$窗口對象滾動事件的影響。通過跟蹤偏移量，您可以根據滾動位置顯示或隱藏內容。

<body scroll id="page"> 
    <header></header> 
    <nav ng-hide="!showContent" class='homeNoAuth'> 
     <span class='nav navbar-fixed-top'> 
      <h1 id='homeLogo' ui-sref='home'>Title</h1> 
      <span class='navElement' ui-sref='signin'>Log In</span> 
      <span class='navElement' ui-sref='signup'>Sign Up</span> 
      <span class='navElement' ui-sref='about'>About</span> 

      <span class="search input-group"> 
       <input type="text" class="form-control" placeholder="Search for..."> 
       <span class="input-group-btn"> 
        <button class="btn btn-default" type="button"> 
         <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 
        </button> 
       </span> 
      </span> 
     </span> 
    </nav> 
    <section></section> 

</body> 


.directive("scroll", function ($window) { 
    return function(scope, element, attrs) { 
     angular.element($window).bind("scroll", function() { 
      if (this.pageYOffset >= 600) { 
       scope.showContent = true; 
      } else { 
       scope.showContent = false; 
      } 
      scope.$apply(); 
     }); 
    }; 
})

Plunker例如：http://plnkr.co/edit/AwQfpmHOJDOd6Uc7tjGy?p=preview

編輯：

// Cleaner version of same directive 
.directive("scroll", ["$window", function ($window) { 
    return function(scope, element, attrs) { 
     angular.element($window).bind("scroll", function() { 
      scope.$apply(scope.showContent = this.pageYOffset >= 600 ? true : false); 
     }); 
    }; 
}]);

來源

2015-10-20 01:51:57 buzzsaw

耶！這個反應很驚人。如此簡單，優雅和愛，它迫使我使用自定義指令，我不需要害怕。非常感謝！ –

很高興爲你效勞。爲了使指令更清潔一點，if/else可以用三元代替... scope.showContent = this.pageYOffset> = 600？真假; – buzzsaw

您可以將$ window對象傳遞給您的控制器，然後將其與您的作用域一起使用，以便訪問$ window.scrollY。不是最乾淨的方法，但它的工作原理。

controller('ctrl', function($scope,$window){ 

$scope.$watch(function(){}); 
});

來源

2015-10-20 01:36:58

謝謝你的提示！我使用了一個自定義指令，但這是一個很好的小竅門:) –

正確的做法是將指令添加到您的應用程序。我已經制定了一個指令，該指令應該受到here（無測試）的啓發。

app.directive('ngShowAfterScroll', function($window) { 
    return { 
    scope: { 
     showOnScroll: '@' 
    }, 
    link: function(scope, element) { 
     var $w = angular.element($window); 
     var visible = false; 
     element.addClass('ng-hide') 
     var doc = document.documentElement; 
     var handler = function() { 
     var top = ($w.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); 
     if(!visible && top >= scope.showOnScroll) { 
      visible = true; 
      element.removeClass('ng-hide'); 
     } 
     else if(visible && top < scope.showOnScroll) { 
      visible = false; 
      element.addClass('ng-hide'); 
     } 
     } 
     $w.on('scroll', handler); 
     handler(); 
    } 
    }; 
});

用它在你的HTML這樣的：

<div ng-show-after-scroll="600"></div>

來源

2015-10-20 01:49:50

謝謝！這似乎會對我有用，但是它可能與它與我的其他代碼交互的一些問題，它根本沒有顯示出來。此欄是多視圖頁面的一部分，其中一頁有無限滾動。我真的很感激你花時間！ –

如果您不滾動整個文檔，您需要將'var top'更改爲等同於滾動容器的滾動頂部，您將很好。 –

你可以注入$window到控制器中，並聽取了'scroll'事件。

app.controller('RootController', [ '$scope', '$window', '$document', 
    function ($scope, $window, $document) { 
     var wnd = $window, 
      doc = $document[0]; 

     $scope.showNav = true; 
     wnd.onscroll = function() { 
      var scrollY = wnd.pageYOffset 
       || doc.documentElement.scrollTop 
       || doc.body.scrollTop; 
      $scope.showNav = scrollY >= 600; 
     }; 
    } 
]);

然後，在你的模板，

<nav ng-show="showNav" class="homeNoAuth">...</nav>

來源

2015-10-20 01:53:34

這是我最初使用和調整的響應，但它變成了多頁視圖頁面，其中一頁有無限滾動。在無限滾動一點點後，它會消失。非常感謝您花時間回覆！它確實幫助我進一步探索角度。 –

如何在頁面上實現基於位置的ng顯示

回答

相關問題