Angularjs Angular：如何从链接函数编译指令？

我使用此链接函数创建了一个指令：

link : function (scope, element, attrs, controller) {
         var markdownContent = {};    
         markdownContent.result = element.text();
         markdownContent.result += '<button ng-click="console.log("test")" class="btn btn-primary btn-xs" ><i class="icon-edit"></i></button>'; 
                    }
        element.html(markdownContent.result);

链接：函数（范围、元素、属性、控制器）{
var markdownContent={}；
markdownContent.result=element.text（）；
markdownContent.result+=''；
}
html（markdownContent.result）；

问题是ng click指令不起作用

我很确定问题是我需要编译，比如说angular，我需要检查这个元素。但我不明白语法和过程

如果有人能帮我，那就太好了

编辑：这里是我的扑克牌

它不起作用，因为当我单击按钮时，函数test（）没有被调用，您可以使用该服务，如中所示

有关内容：

app.directive("myDir", function($compile){
  return function (scope, element, attrs) {
    var markdownContent = {};    
    markdownContent.result = element.text();
    markdownContent.result += '<button ng-click="test()" class="btn btn-primary btn-xs" >Hello</button>'; 
    element.replaceWith($compile(markdownContent.result)(scope));
  };
});

---

编辑

---

正如Dave在评论中提到的，传递给$compile的内容应该有一个根元素。按照Dave的建议，您可以将其包装在

中。在这种情况下，介意用您的指令（或上面的fork my Plunk）和一个它不起作用的示例来做一个提示吗？希望我能帮上忙：）@FlavienBert

$compile

需要一个根元素。因此，将

replaceWith

切换到：

元素.replaceWith（$compile（''+markdownContent.result+''）（scope））Thx可以工作，但没有其他方法，因为如果我在h1标记中使用此指令，它将如下所示：我的标题。但出于搜索引擎优化的原因，我不喜欢这个，因为我不确定它是否是谷歌搜索引擎优化的好架构。这有意义吗？正如所写的那样，div将封装您放置在其中的任何内容。例如，它应该是Title（尽管您目前只获取.text（），而不是html）。也就是说，如果您知道您只有一个根元素（而不是多个根元素，就像添加按钮时那样），那么在这种情况下就不需要包装器div。所以在期末考试中，我有这样一个题目：题目
app.controller("ctrl", function($scope) {
  $scope.test = function() { console.log("Test!"); };
});