AngularJs Directive doesn't work until page reload

Question

I'm trying to build an angularJs directive which will make a div sticky. But I'm stuck in the initial state.

The problem is, this scroll event fires only on page reload. Doesn't work on route change initially. But once I reload the page it work's even with route change.

What am I doing wrong here?

Codes are following:

(function (angular, window) {
    "use strict";

    function stickyDivDirective($compile, $timeout) {
        function directiveLink(scope, element, attributes) {

            function scrollFunction(targetDocument) {
                console.log('Scrolling');
            }

            angular.element(document.querySelector('md-content')).on('scroll', scrollFunction);
        }
        
        var directive = {
            restrict: "A",
            scope: {
                mainContainer: "@",
                targetContainer: "@",
                offsetHeight: '@',
                scrollableElement: '@'
            },
            link: directiveLink
        };
        return directive;
    }

    stickyDivDirective.$inject = ["$compile", "$timeout"];
    angular
        .module(appSuite.module + ".directives")
        .directive("stickyDiv", stickyDivDirective);
})(window.angular, window);

<div class=""
     id="saa__variablesBar"
     sticky-div>
<div>

;

Sabbir Ahmed Siddiquee · Accepted Answer · 2017-12-28 06:05:25Z

2

I found the solution. This is really weird. I just used getElementById instead of querySelector. The issue resolved.

answered Dec 28, 2017 at 6:05

Sabbir Ahmed Siddiquee

1892 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJs Directive doesn't work until page reload

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related