javascript - AngularJS 指令用 ngClick 函数替换标签

Question

我目前正在尝试构建一个指令，该指令将从某个服务获取帖子，然后遍历“标签”数组，用 HTML 替换出现的任何实例。

我遇到了一个问题，我最终只有一个 anchor ，但不会出现 ng-click 属性。

这是我的指令模板中的代码:

<div class="caption-box">
    <span ng-show="post.data.caption.text" ng-bind-html="post.data.caption.text"></span>
</div>

在我的链接函数中:

for(var i = 0; i < scope.post.data.tags.length; i++){
    var str = scope.post.data.tags[i];
    var html = "<a ng-click='modalHashtag()'>" + scope.post.data.tags[i] + "</a>"
    scope.post.data.caption.text = scope.post.data.caption.text.replace(str, $sce.trustAsHtml(html));
}

我期待的输出是这样的，其中 function() 是 Controller 中的一个函数

<a ng-click="function()">#tag</a>

但是我得到的只是这个

<a>#tag</a>

我也尝试过使用过滤器用 HTML 替换标签，虽然它正确地替换了 HTML，但每个标签所附的功能在点击时从未起作用。

编辑:Plunkr http://plnkr.co/edit/FWyZKn1fvdhvZD58HXug?p=preview

Answer 1

所以我花了(很)长的时间试图找到解决这个问题的方法，感谢this question/answer here，我终于设法解决了它。 .

如果其他人遇到问题，这是解决我想要的问题的结果指令:

http://jsfiddle.net/hv7Pj/9/

app.directive('parseTags', function ($compile) {
var pattern = /(^|\s)#([^\s]+)/g;
return {
    restrict: 'A',
    require: 'ngModel',
    replace: true,
    scope: {
        ngModel: '=ngModel'
    },
    link: function compile(scope, element, attrs, controller) {
        scope.$watch('ngModel', function (value) {
            angular.forEach(value.match(pattern), function (tag) {
                var nohash = tag.replace(/#/g, '');
                console.log(nohash);
                value = value.replace(tag, "<a ng-click='onClick(\"" + nohash + "\")'>" + tag + "</a>");
            });

            var content = angular.element('<div></div>').html(value).contents();
            var compiled = $compile(content);
            element.html('');
            element.append(content);
            scope.onClick = function (tag) {
                alert(tag);
            };

            compiled(scope)
        });
    }
};
});