angular parallax - jquery to angular

Question

i have this code working in jquery

<script type="text/javascript">
    $(window).on('scroll', function () {
        console.log($(window).scrollTop());
        $('.parallax-background').css('top', '' + ($(window).scrollTop() / 5) + 'px');
    });
</script>

and I'm trying to translate it into angular and this is what i believe it should be but its not working?

angular.module('twtscrollApp')
    .controller('MainCtrl', function ($scope, $window) {
        $window.on('scroll', function () {
            angular.element('.parallax-background').css('top', '' + ($window.scrollTop() / 5) + 'px');
        });
    });

im not getting any joshing errors but its not working, can do a jfiddle if need be, but any help appreciated. thanks.

Answer 1

The reason what you have does not work is because angular.element does not work via jQuery selectors, it only works via tag names. documentation

In order to get what you have to work you would have to change

angular.element('.parallax-background')

to:

angular.element(document.getElementsByClassName('.parallax-background')[0])

Suggested/Recommended Solution:

That being said, you should really consider doing this via a directive rather than in the controller as it is the appropriate place to put DOM manipulation.