Hello, I am trying to write a module that will contain a service and a directive (the directive will apply to the service for a value), allowing the paralax effect to be applied to various blocks, in my case to images. My logic is, there is a service that, when turned on, will work 1 time and register the window event on scroll and will write it to a variable that needs to be seen globally in the service, and there is a directive that constantly applies the translate property to the element. But I feel that I am doing something very wrong, + I made a mistake somewhere and can’t make the directive see the value of a service. It looks like this:

angular.module("paralaxServices", []).service("mainParalaxService", paralax).directive("eParalaxable", paralaxable); function paralax($window) { var service = { currentWindowPosition: 10 } angular.element($window).on("scroll", setCurrentWindowPosition); return service; }; function setCurrentWindowPosition(event) { currentWindowPosition = this.pageYOffset; } function paralaxable(mainParalaxService) { var directive = { restrict: "A", link: link }; return directive; function link(scope, element, attrs) { element.css("transform", "translate(0%, " + mainParalaxService.currentWindowPosition + "%"); } }

On the view it looks like this:

 <body ng-controller="mainController"> <!--этот контроллер, как и ng-app объявлены в другом модуле, который использует paralaxServices. первый и 3й див просто для отступов--> <div style="width: 100%; height: 100px; background-color:black"></div> <div e-paralaxable class="container-for-paralax-image"> </div> <div class="container-for-paralax-image2"> </div>

Please help me understand what I am doing wrong, and do I use the correct approach?

  • I solved the problem with visibility (I forgot to make a return service), but still, the directive doesn’t update yet, with scrolling - simply good

1 answer 1

the link function is called only when the element is initialized, and only then it receives the value from the service. You need to come up with a "channel" service will notify the directive about the changed offset

For example, you can use the observer pattern

Inside the service to do something like

 var callbacks = []; function subscribe( callback ) { callbacks.push( callback ); } function notify() { callbacks.forEach( function(cb){ cb( this.service.currentWindowPosition ); }); } function setCurrentWindowPosition(event) { this.service.currentWindowPosition = this.pageYOffset; } //TODO логика удаления подписчика

Inside directive

 function link(scope, element, attrs) { mainParalaxService.subscribe( function(newOffset) { element.css("transform", "translate(0%, " + newOffset + "%"); }); }
  • Damn it :), for sure! I completely forgot about event programming, thank you so much! - simply good