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

    }]);

Angular ng-bind-html展开锚标签

1 个答案: