DOMエレメントのクリックイベント機能がangularJsアプリケーションで動作しない

Question

クリックイベントハンドラを持つ動的に新しいDOM要素を追加しようとしています。

HTML

<div ng-app="miniapp" ng-controller="Ctrl"> 
    <div id="div" ng-click="addingEvent()">DIV </div> 
</div> 

はJavaScript

var $scope; 
var app = angular.module('miniapp', []); 

function Ctrl($scope) { 
    $scope.addingEvent = function(){ 
     var myEl = angular.element(document.querySelector('#div')); 
     myEl.append('<a ng-click="afterEvent()" href="#">anchor addedd </br> </a>'); 
    }; 

    $scope.afterEvent = function(){ 
     alert('after event'); 
    }; 

}; 

Here's the demo：ここでは、コードです。ご覧のとおり、アンカーが追加されている間は、クリックイベントは正しく処理されません。それを修正するには？

Answer 1

DOMに要素を追加するだけでは不十分です。Angularにそのことを知らせる必要があります。 （簡潔にするためここでの唯一のコントローラをリスト）一つの可能​​なアプローチ：

function Ctrl($scope, $compile) { 
    var anchorTemplate = '<a ng-click="afterEvent()" href="#">anchor addedd </br> </a>'; 

    $scope.addingEvent = function(){ 
    var myEl = angular.element(document.querySelector('#div')); 
    var $anchor = angular.element(anchorTemplate); 
    $compile($anchor)($scope); 
    myEl.after($anchor); 
    }; 
} 

ここにも適用されるいくつかの良い習慣で、一緒にプレイするthe demoです。しかし、実際には、この機能を指令（Angular 1.5の観点からのコンポーネント）として実装することにしました。

Answer 2

したがって、ng-if文を使用してコードを修正しました。古いJS方法を使用してDOM内の要素を削除または追加する必要はありません。

HTML

<div ng-app="miniapp" ng-controller="Ctrl"> 

<div id="div" ng-click="addingEvent()">DIV <span><a ng-click="afterEvent()" href="#" ng-if="showAnchor">anchor addedd </a></span></div> 


</div> 

SCRIPT

var $scope; 
var app = angular.module('miniapp', []); 

function Ctrl($scope) { 

      $scope.showAnchor=false; 
     $scope.addingEvent = function(){ 

      $scope.showAnchor=true; 

    }; 
    $scope.afterEvent = function(){ 
     alert('after event'); 
    }; 

}; 

Answer 3

Jsfiddle demo updated

myEl.append($compile('<a ng-click="afterEvent()" href="#">anchor addedd </br> </a>')($scope)); 

解決これは動作します