在角度html代码中格式化大量html属性的最佳方法是什么？

Question

有时某些Angular指令需要很多参数.在我目前的项目中,我遇到了很多不同的格式化代码的方法.

在Angular项目中应该使用哪种格式？

1

<abc-table-widget aaa="aaa"
                  bbbb="bbbb"
                  widget="tableWidget"
                  ccc-id="{{ ccc.data.id }}"
                  ddd-id="{{ ddd.data.id }}"
                  eee-active="currentTab === TAB_EEE"
                  behavior="ACCORDION"
                  resource-type="{{ getResourceType() }}">
</abc-table-widget>

2

<abc-table-widget 
    aaa="aaa"
    bbbb="bbbb"
    widget="tableWidget"
    ccc-id="{{ ccc.data.id }}"
    ddd-id="{{ ddd.data.id }}"
    eee-active="currentTab === TAB_EEE"
    behavior="ACCORDION"
    resource-type="{{ getResourceType() }}">
</abc-table-widget>

3

<abc-table-widget aaa="aaa" bbbb="bbbb" widget="tableWidget" 
    ccc-id="{{ ccc.data.id }}" ddd-id="{{ ddd.data.id }}"
    eee-active="currentTab === TAB_EEE" behavior="ACCORDION" 
    resource-type="{{ getResourceType() }}"></abc-table-widget>

4

<abc-table-widget aaa="aaa" bbbb="bbbb" widget="tableWidget" ccc-id="{{ ccc.data.id }}" ddd-id="{{ ddd.data.id }}" eee-active="currentTab === TAB_EEE" behavior="ACCORDION" resource-type="{{ getResourceType() }}"> </abc-table-widget>

Answer 1

这基本上是你自己喜好的问题.说实话,我建议你很快忘掉你的第3和第4个例子.

我认为你的第二个解决方案就是做到这一点.为例如示例1中的参数制作这么多选项卡似乎是相当多的开销.

如果你看一下w3schools的HTML-Coding-Guidelines,你可以看到他们也是这样做的.

http://www.w3schools.com/html/html5_syntax.asp

编辑:没有像这样的东西在w3schools.com但在这里:http://www.quepublishing.com/articles/article.aspx？p = 24011&seqNum = 3