Angularjs 1.5：用html標籤替換組件標籤

我有一個角度爲1.5的應用程序，它大量使用組件。我的問題是，我的自定義組件標籤失敗的可訪問性測試。我的觀點模型模板是這樣的：Angularjs 1.5：用html標籤替換組件標籤

<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標籤轉換爲div，但無法弄清楚如何。 1.5中的指令具有替換功能。 2.0中的組件具有選擇器屬性。我不相信我可以通過使用transclusion來實現這一點（因爲我的組件的控制器需要引用它的父標籤）。

我在想這個方法嗎？也許我應該使用ng-Aria讓屏幕閱讀器忽略這些標籤？有沒有人遇到這個問題？

2016-12-02 Pardo

你有沒有嘗試在你的控制器中注入$元素，並從那裏利用angular.element API？ – jusopi

我已經考慮過了，但沒有嘗試過。對我來說，這將是一種強力方法（將我的組件轉變爲div），並擔心這可能會破壞角度功能。如果它存在，我寧願使用角度提供的東西。 – Pardo

然後，我會和埃蘭的答案一起去。在大多數情況下，HTML5和更高版本應該允許自定義標籤和可訪問性。我會看到他的答案可以爲你做什麼。 – jusopi

您不應該更改元素的標記，但您應該儘可能原生添加aria標記，或者通過角詠歎調添加。閱讀Angular accessibility guide。

2016-12-02 17:58:10

回答