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

Question

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

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);

问题在于 ng-click 指令不起作用。

我很确定问题是我需要编译以对 Angular 说我需要检查这个元素。但是我不懂语法和过程...

如果有人可以帮助我，那就太好了！

编辑：这是我的 PLUNKER plunker

它不起作用，因为当我点击按钮时，函数 test() 没有被调用

Answer 1

您可以使用$compile 服务，如this Plunk 所示。

相关内容：

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));
  };
});

以及对应的HTML：<div my-dir></div>

这假设test 函数在范围内，如下所示：

app.controller("ctrl", function($scope) {
  $scope.test = function() { console.log("Test!"); };
});

---

编辑

正如 Dave 在 cmets 中提到的，传递给 $compile 的内容应该有一个根元素。正如 Dave 建议的那样，您可以将其包装在 <div> 中。 Here 是具有该编辑的 Plunk 的工作版本。