angular.js - AngularJS는 JS에 추가된 DOM 요소에 이벤트를 어떻게 바인딩합니까?

Question

으아아아

답변 감사합니다!

Answer 1

이를 뒷받침하는 예제를 작성할 시간이 없으므로 제가 이해한 내용을 간략하게 설명하겠습니다.

일반적인 상황(즉, DOM 객체를 동적으로 삽입하지 않는 경우)에서 ng-click과 같은 명령이 효과적인 이유(즉, 가시 범위에 등록된 메소드는 클릭 후 호출 가능)는 각도는 컴파일 단계(컴파일 단계)로 호스트 DOM 개체(즉, ng-click 지시문이 추가된 DOM 개체)를 현재 범위에 바인딩합니다. ng-click 这样的指令之所以有效（即点击之后能调用注册在可见作用域里的方法），是因为 angular 在 compiling phase（编译阶段）将宿主 DOM 对象（即加入了 ng-click 指令的 DOM 对象）绑定在当前作用域内了。

换言之，当前作用域知道有这个绑定了 ng-click 的 DOM 对象存在，所以 ng-click 才会起作用。

而在你的例子里，HTML 片段是在 compiling phase 后动态插入到 DOM 树中的，即便你写了 ng-click，当前的作用域也不知道这个指令的存在，所以才会无效。

因此，当你动态插入 HTML 片段的时候，要手动调用 $compile 服务并将这个 DOM 对象绑定给当前的作用域（或其他可见作用域，这要看你的应用逻辑了），具体方法如下：

// 在某一个 controller 中，假设用 jQuery 动态插入一个 HTML 片段……
$('selector').html(
  $compile(
    '<button ng-click="submitForm()">' + 'Submit' + '</button>'
  )(scope)
);

注意要先注入 $compile 服务。

另外，这种方式明显太“恶心”，还有一个更好的办法（但是大量动态插入会有性能损耗）就是利用 ng-repeat 指令，举个例子：

<!-- 在要动态插入的地方…… -->
<p class="form-control" ng-repeat="fragment in fragments">
  <button ng-click="submitForm()">{{fragment.text}}</button>
</p>

这里的 fragments 就是一个空数组（初始状态），所以一开始这里 ng-repeat 不会有任何作用，然后你写一个方法来触发动态插入的动作，把一个类似 { text: 'Submit' } 这样的对象 push 到这个空数组中，ng-repeat 就会“帮”你把 DOM 对象插入了，并且 ng-repeat 本身就会重新 compile 内涵的 DOM 对象，因此 ng-click 会如你所愿的生效。

以上两个例子里我都去掉了你的 submit-form 指令，因为没有必要。如果你要把它写成指令，那么你应该学习 ng-repeat 的方法，简单的说就是监视一个 expression（比如 item in items），当 items

즉, 현재 범위는 ng-click에 바인딩된 DOM 개체가 존재한다는 것을 알고 있으므로 ng-click이 작동합니다. 🎜 🎜귀하의 예에서 HTML 조각은 컴파일 단계 후에 DOM 트리에 동적으로 삽입됩니다. ng-click을 작성하더라도 현재 범위는 이 지시어의 존재를 알지 못합니다. 유효하지 않은. 🎜 🎜따라서 HTML 조각을 동적으로 삽입할 때 $compile 서비스를 수동으로 호출하고 이 DOM 객체를 현재 범위(또는 애플리케이션 로직에 따라 다른 표시 범위)에 바인딩해야 합니다. 방법은 다음과 같습니다: 🎜 으아아아 🎜$compile 서비스를 먼저 삽입해야 한다는 점에 유의하세요. 🎜 🎜또한 이 방법은 너무 "역겹습니다". 더 좋은 방법(그러나 동적 삽입이 많으면 성능 손실이 발생함)은 ng-repeat 지시어를 사용하는 것입니다. 예를 들면 다음과 같습니다. 🎜 으아아아 🎜여기의 fragments는 빈 배열(초기 상태)이므로 ng-repeat는 처음에는 아무런 효과가 없으며 동적 삽입을 트리거하는 메서드를 작성합니다. , { text: 'Submit' }와 같은 객체를 이 빈 배열에 push하면 ng-repeat가 "도움말"이 됩니다. DOM 객체를 삽입했습니다 , ng-repeat 자체가 기본 DOM 개체를 다시 컴파일하므로 ng-click이 예상대로 작동합니다. 🎜 🎜위의 두 예에서는 submit-form 지시문이 필요하지 않기 때문에 제거했습니다. 명령으로 작성하려면 ng-repeat 메서드를 배워야 합니다. 이는 단순히 표현식(예: item in items)을 모니터링하는 것을 의미합니다. code> 항목이 변경되면 기본 HTML 템플릿을 다시 컴파일합니다. 특정 코드를 찾을 수 있습니다. 각도는 오픈 소스입니다. 🎜