使用 JQuery 选择 Angular 生成的元素答案

【问题标题】：Selecting element generated by Angular using JQuery使用 JQuery 选择 Angular 生成的元素
【发布时间】：2017-05-26 04:30:10
【问题描述】：

下面是我的代码的 sn-p：

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

以下 HTML 被添加到上面代码 sn-p 中的 unnamed 视图中：

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

具有该结构的原始代码可以按预期完美运行。当我尝试通过 JQuery 选择 .myClass 时，问题就出现了。我使用 JQuery 选择该类的原因是因为我想将包含该类的元素与 Scroll Magic 一起使用，如下所示：

var controller = new ScrollMagic.Controller();

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

在检查了我的代码后，我意识到 body 标记中的元素可以被 JQuery 拾取，但那些在视图中呈现的元素却不是。我的猜测是，如果没有弄错的话，这个问题可以通过后期绑定技术来解决。

我的问题

我认为后期绑定可以解决此问题的假设是否正确？
如何构建上面的代码以便能够在我的 ng-views 中选择元素？
有没有更好的方法可以在不使用 JQuery 的情况下完成上述所需任务？
如果我的解决方案是后期绑定，如何对 each() 语句执行后期绑定？

【问题讨论】：

标签： javascript jquery html angularjs angular-ui-router

【解决方案1】：

你在做什么是不对的。你有两种选择来做你想做的事

1) 创建指令

在你的情况下最好的选择是创建你自己的指令

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);
   }

 }

});

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

我找到了一个你可以使用的库。它只是一个包装现有js库的角度库

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

【讨论】：

非常感谢您的建议。我会尝试一下并回复你。