AngularJS：如何使用ng-bind-html将事件绑定到动态生成的html

Question

我正在开发一个自定义的AngularJS指令。如何将事件绑定到由指令本身生成的动态生成的html。经过研究，我发现我们需要使用 $ watch 和 $ compile ，但我无法使用它。我发现此answer与我的问题相关。 AngularJS

中jQuery ON 的替代方法是什么？

非常感谢任何帮助。请在plunker

中查看

app.directive( 'btn', [ '$sce', function( $sce ){ 
return { 
    restrict: 'E',
    replace: true,
    template: '<div ng-bind-html="buttonHtml"></div>',
    link : function ($scope, element, attrs) {
    $scope.buttonHtml = $sce.trustAsHtml('<button ng-click="showMessage()">Click Me</button>');
    $scope.showMessage = function () {
        alert("You clicked Me");
  }
} }; }]);

提前致谢

Answer 1

我希望这样做会这样：

app.directive('yourcustomdirective', function(){
  return {
    restrict : "E", //<---E is directive like <customdirective></customdirective>
    replace : true,
    template:"<button>Click me.</button>", // <---dynamically generated button
    link:function(scope, element, attrs){
      element.on('click', function(){ // <-----click event bound 
        alert(scope.greet); // <----alerts the greet in the scope
      });
    }
  };
});

Demo Plunkr.

Demo Plunkr with ng-click.