AngularJSで、動的に生成された要素にイベントをバインドする方法

1 . jqueryでは,要素を動的に生成し,要素を動的に生成すると同時にイベントを動的にバインドするにはlive/on法(jquery 3.0ではbind法が廃止されている)を用いることが知られている.2 . angularjsでは、動作DOMは一般に命令で完了し、イベントリスニングメカニズムは静的に生成されたdomに対してイベントをバインドするが、命令でDOMノードが動的に生成された場合、動的に生成されたノードはJSイベントによってリスニングされない.
例として、

angular.module('myapp',[])
.directive('myText',function(){
    return{
        restrict:'A',
        template:'
Hi everyone
',
        link:function(scope,ele,attr){

        }
    }
})

このコマンドでは、新しいDOMノードが生成されます.

<div ng-click="hello()">Hi everyonediv>

しかし、処理を行わないと、イベントの傍受は静的htmlページ生成時に完了しているため、ここでのng-clickイベントは実現されません.では、動的に生成された要素に、イベントをバインドし、イベントの動的リスニングを実現するにはどうすればいいのでしょうか.
3 . $compileサービスでDOMをコンパイルし、ダイナミックなイベントバインドを実現

var template:'
Hi everyone
',
var content = $compile(template)(scope);

この2つの文では,まずDOMをコンパイルし,次にコンパイルしたDOMを以前の静的ノードに加えることで,動的バインドイベントを実現できるなど,$compile serviceを注入すべきである.

.directive('myText',function($compile){})

完全なコードは次のとおりです.

angular.module('myapp',[])
.directive('myText',function($compile){
    var template:'
Hi everyone
',
    return{
        restrict:'A',
        link:function(scope,ele,attr){
             ele.on("click", function() {
                scope.$apply(function() {
                    var content = $compile(template)(scope);
                    element.append(content);
               })
            });
        }
    }
})