Angularjs 1.5：用 html 标签替换组件标签答案

【问题标题】：Angularjs 1.5: replace component tag with html tagAngularjs 1.5：用 html 标签替换组件标签
【发布时间】：2017-04-17 17:11:00
【问题描述】：

我有一个广泛使用组件的 Angular 1.5 应用程序。我的问题是我的自定义组件标签未能通过可访问性测试。我的视图模型模板如下所示：

<my-component data='myModel'></my-component>

<script type="text/ng-template" id=myComponent.html">
    <pre> {{ data | json }} </pre>
</script>

这将导致 this 在实时 DOM 中呈现：

<my-component data='myModel'>
    <pre>
        ...
    </pre>
</my-component>

我们的测试工具无法识别 my-component 标签并且无法访问。

我已经研究过将 my-component 标签转换为 div，但不知道如何。 1.5 中的指令具有替换功能。 2.0 中的组件具有选择器属性。我也不相信我可以使用嵌入来实现这一点（因为我的组件的控制器需要引用它的父标签）。

我是否以正确的方式思考这个问题？也许我应该使用 ng-Aria 让屏幕阅读器忽略这些标签？有人遇到过这个问题吗？

【问题讨论】：

您是否尝试过将 $element 注入您的控制器并从那里使用 angular.element API？
我考虑过，但没有尝试过。对我来说，这将是一种蛮力方法（将我的组件变成一个 div）并且担心这可能会破坏角度功能。如果存在，我更愿意使用 Angular 提供的东西。
我会在下面选择 Eran 的答案。 HTML5 及更高版本应该允许自定义标签，而在大多数情况下，可访问性严重落后。我想看看他的回答对你有什么帮助。
你最终是如何解决这个问题的？

【解决方案1】：

你不应该改变元素的标签，但是你应该尽可能地添加 aria 标签，或者通过 angular aria。阅读Angular accessibility guide。

【讨论】：