使用 JQuery 选择 Angular 生成的元素
Posted
技术标签:
【中文标题】使用 JQuery 选择 Angular 生成的元素【英文标题】：Selecting element generated by Angular using JQuery 【发布时间】：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() 语句执行后期绑定？
【问题讨论】：
【参考方案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
【讨论】：
非常感谢您的建议。我会尝试一下并回复你。以上是关于使用 JQuery 选择 Angular 生成的元素的主要内容，如果未能解决你的问题，请参考以下文章
构建 Angular 6 库时为导出符号生成的元数据中遇到错误
免费的JavaScript表单生成器库，集成了React、Angular、Vue、jQuery和Knockout。
angular.element vs document.getElementById 或带有旋转（忙碌）控制的 jQuery 选择器