Javascript 如何实现基于页面位置的ng显示_Javascript_Jquery_Angularjs

Javascript 如何实现基于页面位置的ng显示

javascript jquery angularjs

Javascript 如何实现基于页面位置的ng显示,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我是AngularJS新手，在如何定制ng show/ng hide方面似乎遇到了一些问题。我想下面粘贴的导航栏出现一旦用户已经滚动了600像素的页面。因为我不能将jQuery与angular一起使用，所以我有点困惑如何添加此功能我目前正在将它连接到一个auth控制器，该控制器有许多不相关的代码，我还没有发布这些代码 <nav ng-hide="true" class='homeNoAuth'> <span class='nav navbar-fixe

我是AngularJS新手，在如何定制ng show/ng hide方面似乎遇到了一些问题。我想下面粘贴的导航栏出现一旦用户已经滚动了600像素的页面。因为我不能将jQuery与angular一起使用，所以我有点困惑如何添加此功能

我目前正在将它连接到一个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>


标题
登录
注册
关于

任何建议都会令人惊讶。谢谢大家!

您可以将$window对象传递给控制器，然后将其与您的作用域一起使用，以便访问$window.scrollY。这不是最干净的方法，但它是有效的

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

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

您可以将$window对象传递给控制器，然后将其与允许您访问$window.scrollY的作用域一起使用。这不是最干净的方法，但它是有效的

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

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

正确的方法是向应用程序添加指令。我已经制定了一个指令，该指令应该是受答案（无测试）启发而起作用的

app.directive（'ngShowAfterScroll'，函数（$window）{
返回{
范围：{
showOnScroll:“@”
},
链接：功能（范围、元素）{
var$w=角度元素（$window）；
可见值=假；
元素addClass（'ng-hide'）
var doc=document.documentElement；
var handler=function（）{
var top=（$w.pageYOffset | | doc.scrollTop）-（doc.clientTop | 0）；
如果（！visible&&top>=scope.showOnScroll）{
可见=真实；
element.removeClass（'ng-hide'）；
}
else if（可见和顶部


在html中使用它，如下所示：
<div ng-show-after-scroll="600"></div>

正确的方法是在应用程序中添加指令。我已经制定了一个指令，该指令应该是受答案（无测试）启发而起作用的
app.directive（'ngShowAfterScroll'，函数（$window）{
返回{
范围：{
showOnScroll:“@”
},
链接：功能（范围、元素）{
var$w=角度元素（$window）；
可见值=假；
元素addClass（'ng-hide'）
var doc=document.documentElement；
var handler=function（）{
var top=（$w.pageYOffset | | doc.scrollTop）-（doc.clientTop | 0）；
如果（！visible&&top>=scope.showOnScroll）{
可见=真实；
element.removeClass（'ng-hide'）；
}
else if（可见和顶部

在html中使用它，如下所示：
<div ng-show-after-scroll="600"></div>

您可以通过一个简单的指令查看$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();
        });
    };
})

您可以通过一个简单的指令来观察$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();
        });
    };
})

您可以将$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>

。。。
您可以将$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>

。。。
谢谢！这对我来说似乎是可行的，但在与我的其他代码交互时可能会出现一些问题，因为它根本没有出现。此栏是多视图页面的一部分，其中一个页面具有无限滚动。我真的很感谢你抽出时间！如果您没有滚动整个文档，您需要将var-top
更改为与滚动容器的滚动顶部相等，这样您就可以开始了。谢谢！这对我来说似乎是可行的，但在与我的其他代码交互时可能会出现一些问题，因为它根本没有出现。此栏是多视图页面的一部分，其中一个页面具有无限滚动。我真的很感谢你抽出时间！如果您没有滚动整个文档，您需要将var top
更改为与滚动容器的滚动顶部相等，这样您就可以开始了。谢谢您的提示！我使用了一个自定义指令，但这是一个很好的小技巧：）谢谢你的提示！我使用了一个自定义指令，但这是一个很好的小技巧：）这是我最初使用和调整的响应，但在一个多视图页面中，其中一个页面具有无限滚动时，它出现了问题。在无限卷轴中插入一点后，它就会消失。非常感谢您花时间回复！它确实帮助我进一步探索angular。这是我最初使用和调整的响应，但它在多视图页面中出现了问题，其中一个页面具有无限滚动。在无限卷轴中插入一点后，它就会消失。非常感谢您花时间回复！它真的帮助我进一步探索了角度。耶！这一反应令人惊讶。它如此简单、优雅、令人喜爱，迫使我使用一个定制指令，我不必害怕。非常感谢你！很高兴它对你有用。为了使指令更干净，可以用三元函数替换if/else。。。scope.showContent=this.pageYOffset>=600？真：假；耶！这一反应令人惊讶。它如此简单、优雅、令人喜爱，迫使我使用一个定制指令，我不必害怕。非常感谢你！很高兴它对你有用。为了使指令更干净，可以用