Angular Directive with Replace = false創建非語義列表html

我們正在考慮轉向使用replace = false的指令，因爲我聽說replace = true已被棄用。我無法弄清楚如何解決的一個問題是，對於基於列表的所有指令，由此產生的html不是語義的。Angular Directive with Replace = false創建非語義列表html

例如，一個列表中的指令可能是這樣的：

<tg-list tg-compact="true"> 
    <tg-list-item>foo</tg-list-item> 
    <tg-list-item>bar</tg-list-item> 
</tg-list>

目前這將（與替換= TRUE）編譯爲：

<ul class="o-list o-list--compact"> 
    <li class="o-list-item"> 
     foo 
    </li> 
    <li class="o-list-item"> 
     bar 
    </li> 
</ul>

與替換=假，我們將結束與任：

<tg-list class="o-list-icon o-list-icon--compact"> 
    <ul> 
     <tg-list-item> 
      <li class="o-list-item">foo</li> 
     </tg-list-item> 
     <tg-list-item> 
      <li class="o-list-item">bar</li> 
     </tg-list-item> 
    </ul> 
</tg-list>

或：

<tg-list class="o-list-icon o-list-icon--compact"> 
    <tg-list-item>foo</tg-list-item> 
    <tg-list-item>bar</tg-list-item> 
</tg-list>

第一個是壞的，因爲它肯定是非語義的，第二個是壞的，因爲儘管它是「語義的」（就像在html5中，定製標記是好的），我們會失去任何ul> li會給我們的東西例如，屏幕閱讀器可能有特殊的方式來對待它們）。

也許我們可以使用html5'role'屬性？但如果是這樣的話，我認爲列表項需要將該角色添加到鏈接函數中的元素中？

不知道，但你怎麼解決這個問題呢？

來源

2016-01-18 Kenese

您的預期產出是？你想把它編譯成什麼？ – mostruash

理想情況下，語義上使用ul和li的東西，所以：

' – Kenese

這就是'replace'爲true時的結果。你爲什麼要'替換'爲假？編輯：對不起，我錯過了你的問題的第一句話。 – mostruash

您可以配置僞指令將restrict設置爲代表屬性的A。你可以使用它作爲這樣：

<ul tg-list tg-list-compact=true> 
    <li tg-list-item> 
     foo 
    </li> 
    <li tg-list-item> 
     bar 
    </li> 
</ul>

來源

2016-01-18 01:23:50

我猜OP在指令中應用類，所以也許你可以在你的例子中刪除它們。 – mostruash

好點（並感謝語法修復）:-) –

感謝您的回答。唯一的問題是我們有一個完整的組件庫（有點像bootstrap），所有這些都是僅包含元素的組件，並且只有一些組件像這樣聲明並不是很好 - 從api的角度來看 – Kenese

所以，我到底做的是使列表項自身纏繞在它的連接功能的「禮」。

列表項鍊接：

public link = ($scope: angular.IScope, $element: angular.IAugmentedJQuery) => { 
$element.wrap('<li></li>'); }

到底很簡單，但使HTML更symantic，所以我很高興。 Shout out to Sander for the help

來源

2016-01-21 22:38:59 Kenese

Angular Directive with Replace = false創建非語義列表html

回答

相關問題