javascript - 根据其他元素设置元素不透明度以 Angular 滚动顶部

Question

我是 angular 的新手。我来自 jQuery 背景，想改变我的想法。

我有一个元素，当您滚动页面时，我希望它淡出。假设它最初距离顶部 100 像素，我希望元素的不透明度为 = 顶部/100。

我像这样把这个指令放在元素上

.directive("scrollOpacity", function (){
    return {
       link: function ($scope, element, attrs) {
            element.bind('scroll', function (e) {
                console.log(e);
            });
        }
    }
});

<div id="imageHolder" scroll-opacity></div>

这什么都不做。

我想以“Angular 方式”来做这件事，并且很乐意听到一些替代方案来帮助我了解 Angular 做事方式

Answer 1

你只需要在你绑定(bind)的函数中设置元素的样式

.directive('scrollopacity', function ($document) {

    return {

        link: function (scope, element, attrs) {
            var dochandler = function (event) {
            alert("scroll");//thing to be done
            };
            element.bind('scroll',dochandler);

        }
    };

});