Question

如何将bootstrap ScrollSpy更改为angularjs？而我不想窥探身体的元素。我不知道如何在js中使用.directive。

<body data-spy="scroll">
    <div style="height: 125px;"></div>
        <div class="row">
            <div class="col-lg-3 myScrollspy container">
                <ul class="nav nav-tabs nav-stacked affix" id="myNav">
                    <li class="active"><a href="#section-1">Section One</a></li>
                    <li><a href="#section-2">Section Two</a></li>
                    <li><a href="#section-3">Section Three</a></li>
                </ul>
            </div>
            <div class="col-lg-9 container">
                <h2 id="section-1">Section One</h2>

                <hr>
                <h2 id="section-2">Section Two</h2>

                <hr>
                <h2 id="section-3">Section Three</h2>

                <hr>

            </div>
        </div>
    </div>

</body>

Answer 1

AngularStrap的实现是http://mgcrea.github.io/angular-strap/##scrollspy。

但是如果你只是找到一个元素scrolltop，你可以用这个值做很多。使用指令，您可以找到页面上元素的位置：

app.directive('ScrollTop', ['$window', function($window) {
    return {
        scope: {
            scroll: '=ScrollTop'
        },
        link: function(scope, element, attrs) {
            var w = angular.element($window);
            var handler = function() {
                scope.scroll = w.scrollTop();
            }
            w.on('scroll', scope.$apply.bind(scope, handler));
            handler();
        }
    };
}]);

然后元素将具有范围内的值。

<div scroll-top="scroll_value">{{scroll_value}}</div>

如何将bootstrap ScrollSpy更改为angularjs

1 个答案: