Question

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

我遇到的问题是我最终只使用了一个锚点，但是不会出现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（）是控制器中的一个函数

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

AngularJS指令用ngClick函数替换标签

1 个答案: