2

We are thinking about moving to directives that use replace=false, as I hear replace=true is being deprecated. One problem I cant figure out how to fix, is for all directives that are based on lists, the resultant html is not semantic.

For example a list directive might be something like:

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

this will currently (with replace=true) compile to:

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

with replace=false we will end up with either:

<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>

or:

<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>

The first is bad because it is definitely non semantic, the second is bad because although it is "semantic" (as in html5, custom tags are ok), we lose anything that ul>li would have given us (a screen reader, for example, may have special ways to treat them).

Perhaps we can use the html5 'role' attributes? But if so i think the list item would need add the role to the element in the link function?

Dunno, but how have you lot solved this?

Kenese
  • 39
  • 5
  • What's your expected output? What do you want it to compile to? – mostruash Jan 18 '16 at 01:08
  • Ideally something that uses ul and li semantically, so: `
    • foo
    • bar
    `     – Kenese Jan 18 '16 at 01:10
  • So that's what you get when `replace` is true. Why do you want `replace` to be false? Edit: Sorry I missed the first sentence of your question. – mostruash Jan 18 '16 at 01:20
  • Replace=true is deprecated for performance reasons. [https://code.angularjs.org/1.3.0-beta.11/docs/api/ng/service/$compile#-replace-deprecated-will-be-removed-in-next-major-release-] [http://stackoverflow.com/questions/24194972/why-is-replace-deprecated-in-angularjs]. That deprecation is why we are wanting to make the change, though the original html is preferred – Kenese Jan 18 '16 at 01:23

2 Answers2

4

You can configure directives to have restrict set to A which stands for attribute. That way you can use it as:

<ul tg-list tg-list-compact=true>
    <li tg-list-item>
        foo
    </li>
    <li tg-list-item>
        bar
    </li>
</ul>
Bartosz Gościński
  • 1,468
  • 1
  • 16
  • 28
  • I guess OP applies classes in the directive so maybe you can remove them in your example. – mostruash Jan 18 '16 at 01:26
  • thanks for your answer. The only problem with this is we have a whole component library (kinda like bootstrap), all of which are element only components, and it is not great having only some of the components declared like this - from an api point of view – Kenese Jan 18 '16 at 01:55
1

So what I did in the end is make the list-item wrap itself in an "li" in its link function.

The list-item link:

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

Pretty simple in the end, but makes the html much more symantic so i am happy. Shout out to Sander for the help

Kenese
  • 39
  • 5