javascript - Angularjs 1.5 : replace component tag with html tag

Question

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

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

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

这将导致在实时 DOM 中呈现:

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

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

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

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

Answer 1

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