0

Below is a snippet of my code:

<body>
  <div class="body" ng-view></div>
  <div class="footer" ng-view="footer"></div>
</body>

The following HTML is being added to the unnamed view in the code snippet above:

<div>
  <div class="myClass"></div>
  <div class="myClass"></div>
  <div class="myClass"></div>
</div>

The original code with that structure works perfect as expected. The problem now comes when I try to select .myClass via a JQuery. The reason I am using JQuery to select that class is because I want to use the element containing that class with Scroll Magic as follows:

var controller = new ScrollMagic.Controller();

jq(".myClass").each(function() {
  new ScrollMagic.Scene({
      triggerElement: this,
      duration: '50%'
  })
  .setPin(this)
  .addTo(controller);
});

After inspecting my code I realized the the elements within the body tag can be picked up by JQuery, but those that are rendered in the views are not. My guess is that this issue can be solved with late binding techniques if not mistaken.

My Questions

  1. Am I correct in my assumption that late binding can solve this issue?
  2. How can I structure the code above to be able to pick the elements within my ng-views?
  3. Are there better ways I can accomplish the desired task above without JQuery?
  4. If late binding is my solution, how can I perform late binding on an each() statement?
Improve this question

1 Answer 1

Reset to default
0

What are you doing is not right. You have two alternatives to do what you want

1) Create Directive

The best choice in you case is to create you own directive

https://docs.angularjs.org/guide/directive

angular.directive('scrollMagic',function(){
 return {
   'restrict':'A',
   'scope':{
      'scrollMagicController':'='
   }
   'link':function(scope, element){
      new ScrollMagic.Scene({
        triggerElement: element,
        duration: '50%'
      })
     .setPin(element)
     .addTo(scope.scrollMagicController);
   }

 }

});

Your html will be

<div>
  <div scroll-magic scroll-magic-controller='controller' class="myClass"></div>
  <div scroll-magic scroll-magic-controller='controller' class="myClass"></div>
  <div scroll-magic scroll-magic-controller='controller' class="myClass"></div>
</div>

2) Use existing angular library

I find a library that you can use. It is simply an angular library that wraps the existing js library

https://github.com/homerjam/angular-scroll-magic

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

1 Comment

Thank you very much for you suggestions. I am going to try it out and get back to you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.