angular.js - AngularJS에 DOM 요소를 추가하고 이벤트를 바인딩하는 방법

Question

텍스트 상자 입력, li 요소 생성 및 li 요소가 이벤트 바인딩 가능

Answer 1

사실 이것은 매우 복잡해질 수 있는 문제입니다. 현실적으로는 해결 방법이 많이 있습니다. 가장 간단한 참고 자료를 작성하겠습니다.

으아악

그런 다음 해당 템플릿에서:

으아악

현실적으로 변수가 너무 많아서 하나하나 자세히 말씀드리기는 어려운 아이디어입니다. 유사한 문제를 처리할 때 고려해야 할 핵심 사항은 다음과 같습니다.

1. 정의되지 않은 수와 HTML 요소의 내용을 생성하고 싶기 때문에 이를 보관할 (양방향 바인딩) 컬렉션이 필요합니다
2. 동시에 현재 생성 중인 항목을 저장하는 개체와 이 항목을 컬렉션에 저장한 후 재설정하는 메서드가 필요합니다
   2.1 물론 객체는 필요없지만 추가시 input의 값을 캡쳐하는데 이건 Angle로 쓰는 방식이 아니고 jQuery로 쓰는 방식입니다input 的值，但这不是 angular 的写法，这是 jQuery 的写法
3. 我能确定的是用什么标签，绑定什么事件，所以这些东西写在模版里，配合 1 里的集合遍历生成就好了。
4. 上面那个例子最恶心之处在于借助了 $event 的对象，因为它使得我必须在 controller 混入和 DOM 或 Event 相关的代码而不是业务逻辑。当然也有很多解决办法，比如：
   4.1 在 2 的基础上，我不单纯用一个字符串保存 li 项的文字内容，而是用一个对象。比如 listItem.text 保存文字内容，然后在添加的时候给它生成一个递增的 listItem.id。这样做有很多好处，比如说 ng-repeat 的时候可以 track by，控制模版输出也会更灵活，绑定的事件处理方法可以不传 $event 而是传 item 或 item.id
   내가 결정할 수 있는 것은 어떤 태그를 사용할지, 어떤 이벤트를 바인딩할지이므로 이러한 사항을 템플릿에 작성하고 1의 컬렉션 순회를 통해 생성할 수 있습니다.

위 예제에서 가장 역겨운 점은 $event의 개체를 사용한다는 점입니다. 비즈니스 논리. 물론 다음과 같은 다양한 솔루션이 있습니다. 🎜 4.1 2를 기준으로 li 항목의 텍스트 내용을 저장하기 위해 단순히 문자열을 사용하지 않고 객체를 사용합니다. 예를 들어 listItem.text는 텍스트 콘텐츠를 저장한 다음 추가 시 이에 대한 증분 listItem.id를 생성합니다. 예를 들어, ng-repeat는 추적이 가능하며 바인딩된 이벤트 처리 방법이 더 유연해집니다. >$event를 전달하려면 대신 item 또는 item.id를 전달하면 기다릴 수 있습니다 🎜 4.2 그러나 바인딩된 이벤트 처리 방법이 DOM을 작동해야 하는 경우 지시문으로 작성하는 것이 가장 좋으며 데이터(목록 항목 모음)는 여전히 컨트롤러에 보관될 수 있습니다🎜 🎜

Answer 2

ng 매개변수가 포함된 동적으로 삽입된 HTML의 경우, Anglejs는 일반적으로 이를 두 번 구문 분석하지 않습니다.
종속성 주입을 사용하여 $compile을 호출하면 로컬 코드를 다시 작성하고 컴파일할 수 있습니다.