일부 사용자는 issue on my Github project이라는 글을 올렸지 만 AngularJS를 사용하지 않기 때문에 나는 그를 도울 수 없습니다. 이 연결되어있어 경우에만 작동 KUTE.js로,AngularJS에서 문서 준비가 완료되면 버튼 클릭시 애니메이션을 클릭하십시오.
AngularJS와 그것을 수행하는 문제는 내가 이해 문서에 물건 렌더링입니다하지만 내 스크립트 KUTE.js는 AngularJS와에 의해 정의 된 요소가 DOM에 이미있을 것으로 기대 <body>의 끝에
내가 적절한 실행 순서와 기본 HTML5 스크립팅의 방식으로 코드 실행을 주문하는 방법이 필요합니다 가능한 솔루션 :
이여기의 코드 편집기는 각도 항목을 지원하지 않으므로 here's a plunker에 문제가 있습니다.
Angular가 DOM을 렌더링하고 상호 작용하는 방식은 Angular가 핵심에서 작동하는 방식에 내재되어 있으며 실제로 그것에 대해 아무 것도 할 수 없습니다.
어쨌든 애니메이션이 트리거 될 때 라이브러리가 요소를 찾을 수 없다는 것이 아닙니다. Tween 개체의 console.log에서 _el: path 항목이 rectangle 요소를 올바르게 가리 킵니다. Element not found or incorrect selector: path 오류는 응용 프로그램이로드 될 때 어떤 이유로 든 호출되는 selector() 함수에 의해 발생합니다. Angular가 DOM에 첨부 할 기회가 생기기 전에 라이브러리가로드되는 즉시 특정 요소를 찾고 있다면 제대로 작동하지 않을 것입니다.
그런 말로는 모두 the Plunker to work을 얻을 수있었습니다. selector() 함수가로드 할 때 실행되는 이유는 DOM에서 svg 요소를 찾고 있기 때문입니다. index.html의 본문에 빈 경로가있는 더미 svg를 넣으면 선택기 오류가 발생하지 않습니다. 이제 단추를 클릭하여 애니메이션을 트리거하면 Angular 구성 요소 템플릿 안에있는 경로가 해당 ID로 검색되고 (이전에 찾은 Svg와 동일한 지 여부는 신경 쓰지 않음) 애니메이션.
이 솔루션으로 무엇을 할 수 있는지 알아 보겠습니다. 정말 고맙습니다. – thednp
OK 문제를 발견하고 고쳐주었습니다. 플러그인은'.selector()'메소드를 필요로하지 않는 곳에서 사용하고 있었으며, 단순히 그 목적을 위해'querySelector()'를 사용 했어야했습니다. https://github.com/thednp/kute.js/commit/1d153c363adbef8d1fc7e01dc272501899816daf – thednp