javascript - 如何动态添加 ng-click 到 span？

Question

我应该在动态生成的范围中添加 ng-click 指令。跨度包围所选文本。

range = window.getSelection().getRangeAt(0);
var span = document.createElement("span");
$(span) .addClass("comment")
           .attr("id", short_id +"_"+ n_comment)
           .attr("ng-click", "showComment()")
           .append(range.extractContents());
range.insertNode(span);

上面的代码获取选择内容并用 span 包裹它，但是 ng-click 不起作用。
由于 Angular 指令是动态生成的，因此应该使用 $compile 进行编译，但在这种情况下我不知道如何执行编译。

如何解决？谢谢大家。

Answer 1

我用这段代码自己解决了:

range = window.getSelection().getRangeAt(0);
var span = document.createElement("span");
$(span) .addClass("comment")
           .attr("id", short_id +"_"+ n_comment)
           .attr("ng-click", "showComment()")
           .append(range.extractContents());
range.insertNode(span);
getScope(span);

函数getScope:

function getScope(el){
    var $scope = angular.element(el).scope();
    $scope.view(el);
}

通过这种方式，我得到了span的范围，并在view()函数中编译了动态生成的html:

$scope.view = function(element){
    $compile(element)($scope);
}

编译元素后，ng-click 可以工作。谢谢大家。