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.