在 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 具有正确执行顺序的脚本的方式来命令代码执行:
- HTML渲染
- AngularJS execution/render
- JS执行(KUTE.js)
由于此处的代码编辑器不支持 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 work。 selector()
函数在加载时 运行 的原因是因为它在 DOM 上寻找 svg 元素。如果你在 index.html
的主体上放置一个空路径的虚拟 svg,它可以防止抛出选择器错误。现在,当你点击按钮触发动画时,它会通过它们的 id 找到 Angular 组件模板内的路径(它不关心它们是否在它之前找到的同一个 svg 中)然后播放动画。
一些用户发布了 issue on my Github project 我根本帮不了他,因为我不使用 AngularJS。
问题
据我所知,AngularJS 在文档呈现中做这些事情,但我的脚本 KUTE.js 期望 AngularJS 定义的元素已经在 DOM 中,因为 KUTE.js 只有链接在 <body>
.
可能的解决方案
我需要一种方法来以原生 HTML5 具有正确执行顺序的脚本的方式来命令代码执行:
- HTML渲染
- AngularJS execution/render
- JS执行(KUTE.js)
由于此处的代码编辑器不支持 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 work。 selector()
函数在加载时 运行 的原因是因为它在 DOM 上寻找 svg 元素。如果你在 index.html
的主体上放置一个空路径的虚拟 svg,它可以防止抛出选择器错误。现在,当你点击按钮触发动画时,它会通过它们的 id 找到 Angular 组件模板内的路径(它不关心它们是否在它之前找到的同一个 svg 中)然后播放动画。