我是 AngularJS 的新手，似乎在弄清楚如何自定义 ng-show/ng-hide 方面遇到了问题。我希望一旦用户向下滚动页面 600px，就会出现下面粘贴的导航栏。因为我无法将 jQuery 与 Angular 一起使用，所以我有点困惑如何添加此功能。
我目前正在将其连接到一个身份验证 Controller ，该 Controller 有很多不相关的代码，但我尚未发布它。
<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>
任何建议都会很棒。谢谢!
最佳答案
您可以通过观察 $window 对象滚动事件的简单指令来获得您正在寻找的效果。通过跟踪偏移量，您可以根据滚动位置显示或隐藏内容。
<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);
});
};
}]);
关于javascript - 如何根据页面位置实现 ng-show，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33226434/