在 AngularJS 2 中准备好文档时安排按钮单击动画

Schedule animation on button click when document ready in AngularJS 2

一些用户发布了 issue on my Github project 我根本帮不了他,因为我不使用 AngularJS。

问题

据我所知,

AngularJS 在文档呈现中做这些事情,但我的脚本 KUTE.js 期望 AngularJS 定义的元素已经在 DOM 中,因为 KUTE.js 只有链接在 <body>.

的末尾才有效

可能的解决方案

我需要一种方法来以原生 HTML5 具有正确执行顺序的脚本的方式来命令代码执行:

由于此处的代码编辑器不支持 Angular 内容,因此 here's a plunker 出现了问题。

Angular 呈现并与 DOM 交互的方式是 Angular 的核心工作方式所固有的,您不能(也不应该)对此做任何事情那。

无论如何,问题不在于您的库在触发动画时找不到元素。在 Tween 对象的 console.log 中,_el: path 项正确指向矩形元素。 Element not found or incorrect selector: path 错误是由您的 selector() 函数引发的,无论出于何种原因,该函数都会在应用程序加载时被调用。如果您的图书馆在 Angular 有机会将它们附加到 DOM 之前立即在加载时查找某些元素,它将无法工作。

综上所述,我得到了 the Plunker to workselector() 函数在加载时 运行 的原因是因为它在 DOM 上寻找 svg 元素。如果你在 index.html 的主体上放置一个空路径的虚拟 svg,它可以防止抛出选择器错误。现在,当你点击按钮触发动画时,它会通过它们的 id 找到 Angular 组件模板内的路径(它不关心它们是否在它之前找到的同一个 svg 中)然后播放动画。