使用jQuery选择Angular生成的元素

Question

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: 以下HTML被添加到上面代码片段中的未命名视图中：

<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. 现在，当我尝试通过JQuery选择.myClass时出现问题。 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: 我使用JQuery选择该类的原因是因为我想将包含该类的元素与Scroll Magic一起使用，如下所示：

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. 检查完我的代码后，我意识到body标记中的元素可以由JQuery拾取，但是在视图中呈现的元素则不能。 My guess is that this issue can be solved with late binding techniques if not mistaken. 我的猜测是，即使没有记错，也可以使用后期绑定技术来解决此问题。

My Questions 我的问题

Am I correct in my assumption that late binding can solve this issue? 我认为后期绑定可以解决此问题是否正确？
How can I structure the code above to be able to pick the elements within my ng-views? 如何构造上面的代码，以便能够在ng-views中选取元素？
Are there better ways I can accomplish the desired task above without JQuery? 有没有更好的方法可以在没有JQuery的情况下完成上述任务？
If late binding is my solution, how can I perform late binding on an each() statement? 如果后期绑定是我的解决方案，那么如何对each（）语句执行后期绑定？

Answer 1

What are you doing is not right. 你在做什么是不对的。 You have two alternatives to do what you want 您有两种选择来做自己想做的

1) Create Directive 1）建立指令

The best choice in you case is to create you own directive 您最好的选择是创建自己的指令

https://docs.angularjs.org/guide/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 您的html将是

<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 2）使用现有的角度库

I find a library that you can use. 我找到了可以使用的库。 It is simply an angular library that wraps the existing js library 它只是一个包装现有js库的角度库

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

使用jQuery选择Angular生成的元素

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-01-11 11:50:19

使用jQuery选择Angular生成的元素

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-01-11 11:50:19

解决方案1
0 已采纳 2017-01-11 11:50:19