Angular ng-bind-html解包锚标签

Question

我在下面的代码中使用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>

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

    }]);