Question

让我先说一下，我知道这是一种可怕的做法。但是，是否可以使用jQuery在AngularJS项目中滚动图像？

我的工作截止日期很紧，需要让这个Angular项目看起来更好。我现在没有时间绕着Angular的方式绕过这样做，所以快速而肮脏的就足够了。

这是我在的地方：

我有一个控制器，LandingCtrl

angular.module('appName.controllers', [])
       .controller('LandingCtrl',  ['$scope', function($scope) {

}]);

我有一个视图，里面有一堆div，我想在用户到达时淡入。

单独使用jQuery，它会很简单，就像这样： http://jsfiddle.net/tcloninger/e5qaD/

$(document).ready(function() {

    /* Every time the window is scrolled ... */
    $(window).scroll( function(){

        /* Check the location of each desired element */
        $('.hideme').each( function(i){

            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();

            /* If the object is completely visible in the window, fade it it */
            if( bottom_of_window > bottom_of_object ){

                $(this).animate({'opacity':'1'},500);

            }

        }); 

    });

});

但是，当我尝试在我的控制器中使用该jQuery函数时，该函数的范围是有问题的视图，我遇到了各种各样的问题。

有没有办法正确地做到这一点？

提前致谢。

Answer 1

如果你要使用jquery，你可以坚持（几乎）你在指令中拥有的东西：

angular
    .module('app', [])
    .directive('scrollContainer', scrollContainer)



function scrollContainer($window) {

    return {
        restrict: 'A',
        scope: true,
        link: function(scope, element, attrs) {

            angular.element($window).bind("scroll", function() {

                $('.hideme').each( function(i){

                    var bottom_of_object = $(this).offset().top + $(this).outerHeight();
                    var bottom_of_window = $(window).scrollTop() + $(window).height();

                    /* If the object is completely visible in the window, fade it it */
                    if( bottom_of_window > bottom_of_object ){

                        $(this).animate({'opacity':'1'},500);

                    }
               });
           });
        }
    }
}

<body ng-app="app">

    <div id='container' scroll-container>

        <div>Hello</div>
        <div>Hello</div>
        <div>Hello</div>
        <div>Hello</div>
        <div>Hello</div>
        <div>Hello</div>
        <div class="hideme">Fade In</div>
        <div class="hideme">Fade In</div>
        <div class="hideme">Fade In</div>
        <div class="hideme">Fade In</div>
        <div class="hideme">Fade In</div>

    </div>

</body>

Plunker似乎失败了，所以我在codepen上找到了一个工作示例

http://codepen.io/anon/pen/GgBzPg

如何在滚动到Angular应用程序时添加jQuery fadeIn

1 个答案: