Skip to content Skip to sidebar Skip to footer
Home / Angularjs / Html

Why Are Tables Not Working Right In These Angularjs Directives?

Post a Comment
I have the following AngularJS template file:

Solution 1:

With tables you need nest your elements correctly. So you cant nest custom tag inside tbody tag, the same with TR ... So please use attributes restriction for directives for that case.

Solution 2:

I'm new to Stackoverflow, so I couldn't comment On Sergey's answer. But I'm pretty sure he meant this: https://jsfiddle.net/a41o54ec

On this line:

template: '<divng-include="MyDirectiveACtrl.myDirectiveAHTML"></div>'

That div needs to be a tr. And then I hope MyDirectiveACtrl.myDirectiveAHTML is something like <td>whatever</td>. I would recommend simply changing the template to this:

template: '<tr><tdng-include="MyDirectiveACtrl.myDirectiveAHTML"><td></tr>'

With tr>td in the template, the contents of MyDirectiveACtrl.myDirectiveAHTML can be almost anything.

EDIT #1

If the template must contain several rows i would recommend creating an external .html and use templateUrl instead. Like this...

New file: myDirectiveA.template.html:

<tr><tdbgcolor="orange">E</td><tdbgcolor="yellow">F</td></tr><tr><tdbgcolor="orange">E</td><tdbgcolor="yellow">F</td></tr>

On the directive definition remove template:... and do:

templateUrl:"path/to/myDirectiveA.template.html"

EDIT #2

FAIL! on my part! It is true that when using templateUrl, myDirectiveA.template.html MUST contain a single parent element. That means that this:

<tr><tdbgcolor="orange">E</td><tdbgcolor="yellow">F</td></tr><tr><tdbgcolor="orange">E</td><tdbgcolor="yellow">F</td></tr>

can't be done on the template... Since we are playing with tables, there's only a few elements that could be a parent for several <tr>. Being <table>, <tbody>, and a few others.

Since tables limit the element types you can use, you have to clearly define what you are doing with these directives. You reached a point where you have to decide if you are using a directive per row or a directive per table.

If you keep the directive as we defined it before, that means your template can only contain one row. We defined a directive-per-row model.

If you do want multiple rows on your template you must then apply the directive to table or tbody. I would do it to table and let one directive control the whole table.

<table width="40%" border="1"
  rpt-my-directive-a
  p="1"
  q="2"
  >
</table>

Also, remove this line from your directive definition. Otherwise, the <table> element will get replaced by the contents of the template.

replace:true// REMOVE ME!

By doing this... myDirectiveA.template.html can now have tbody as a parent element and the warning will go away.

// myDirectiveA.template.html
<tbody><tr><tdbgcolor="orange">E</td><tdbgcolor="yellow">F</td></tr><tr><tdbgcolor="orange">E</td><tdbgcolor="yellow">F</td></tr></tbody>

Post a Comment for "Why Are Tables Not Working Right In These Angularjs Directives?"

Menu Halaman Statis

© 2022 - Html5 Learning