Custom directive does not work inside table row

[Ben Foster]

Hi there,

I've just started using AngularJS for the first time and wanted to create a custom directive to create "in-place" editable tables. The idea is to specify a "display" template and an "edit" template and then show the appropriate template based on some condition.

Unfortunately I've been unable to get this to work. At first I thought this was an issue with using "ng-show" on a custom directive as I posted on SO (http://stackoverflow.com/questions/20542035/ng-show-does-not-work-with-custom-directive). However after testing further it seems to be an issue with using a custom directive inside a <tr> element since it does work if I use a divs.

What I'm trying to avoid is code like this:

    <table>

        <tr ng-repeat="customer in customers">

            <ng-template>

                <td ng-hide="isSelected">{{customer.name}}</td>

                <td ng-hide="isSelected">{{customer.age}}</td>

                <td ng-hide="isSelected"><button ng-click="edit(customer)"</td>

                <td ng-show="isSelected"><input type="text" ng-model="customer.name"/></td>

                <td ng-show="isSelected"><input type="text" ng-model="customer.age"/></td>

                <td ng-show="isSelected"><button ng-click="save(customer)"</td>

            </ng-template>

        </tr>

    </table>

Any help would be appreciated.

[Sander Elias]

Hi Ben,

1. This construct is not giving working HTML.  look up the specs for tables and stuff.

2. It is a really bad idea to name your own directives in the same namespace as Angular itself. (ngXxxx should be reserved for official Angular stuff, as recommended in the docs!)

3. better create a plunk or a fiddle to illustrate your problem, that way more of us are willing to help you.

Regards

Sander

[Ben Foster]

Hi Sander,

Thanks for your feedback. I didn’t think it mattered because I was using replace:true but I realise now it still renders the “invalid” element first.

I actually came up with a solution using ng-include that works well - http://jsfiddle.net/benfosterdev/UWLFJ/. Of course if it can be improved let me know :)

Thanks,

Ben Foster
planetcloud

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/JfMsVwYNVQw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

[Sander Elias]

Hi Ben,

This looks good to me! A nice solution to your problem.

Regards

Sander