Angular ng-bind-html 解包锚标签答案

【问题标题】：Angular ng-bind-html unwrapping anchor tagsAngular ng-bind-html 解包锚标签
【发布时间】：2014-04-04 00:48:50
【问题描述】：

我在下面的代码中使用了 ng-bind-html：

<a href="/test">
    <article>
        <p>
            Some content goes here
        </p>
    </article>
</a>

我这样做是为了让整个内容区域成为一个大锚。但是，当使用 ng-bind-html 时，我得到以下输出：

<!-- my anchor tag is closed and stripped! -->
<a></a>
<p>
     Some content goes here
</p>

当使用 $sce.trustAsHtml 显式转义输出时：

<!-- anchor tag closed -->
<a href="/test"></a>
<article>
    <!-- random anchor added to the top of every nested element -->
    <a href="/test"></a>

    <p>
        Some content goes here
    </p>
</article>

【问题讨论】：

标签： javascript angularjs ng-bind-html

【解决方案1】：

我通过制作一个像锚一样的自定义指令来解决这个问题。当它被添加到周围的 div 时，它不会引起上述问题。

exports.directive('anchor', [function () {

        return {
            restrict: 'AE',
            link: function (scope, element, attributes) {
                element.addClass('anchor');
                element.on('click', function () {
                    window.location.href = attributes.anchor;
                });
            }
        };

    }]);

【讨论】：