Angularjs 1.5: 用 html 标签替换组件标签

Question

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

<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 中的组件具有选择器属性。我不相信我也可以使用嵌入来实现这一点（因为我的组件的控制器需要引用它的父标签）。

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

Answer 1

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

Angularjs 1.5: replace component tag with html tag