Databases
StackOverflow2013
Postsdbo
POTranscluding Attributes in an AngularJS Directive
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTranscluding Attributes in an AngularJS Directive
    text
    copied!<p>I was creating a select replacement directive to make it easy to style up selects according to the design without having to always right a bunch of markup (i.e. the directive does it for you!).</p> <p>I didn't realize that attributes don't transclude to where you put <code>ng-transclude</code> and just go to the root element.</p> <p>I have an example here: <a href="http://plnkr.co/edit/OLLntqMzbGCJS7g7h1j4?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/OLLntqMzbGCJS7g7h1j4?p=preview</a></p> <p>You can see that it looks great... but there's one major flaw. The <code>id</code> and <code>name</code> attributes aren't being transferred. Which, ya know, without <code>name</code>, it doesn't post to the server (this form ties into an existing system, so AJAXing the model isn't an option).</p> <p>For example, this is what I start with:</p> <pre><code>&lt;select class="my-select irrelevant-class" name="reason" id="reason" data-anything="banana"&gt; &lt;option value=""&gt;Reason for Contact...&lt;/option&gt; &lt;option&gt;Banana&lt;/option&gt; &lt;option&gt;Pizza&lt;/option&gt; &lt;option&gt;The good stuff&lt;/option&gt; &lt;option&gt;This is an example of a really, really, really, really, really, really long option item&lt;/option&gt; &lt;/select&gt; </code></pre> <p>...this is what I <em>want</em> it to look like:</p> <pre><code>&lt;div class="faux-select" ng-class="{ placeholder: default == viewVal, focus: obj.focus }"&gt; &lt;span class="faux-value"&gt;{{viewVal}}&lt;/span&gt; &lt;span class="icon-arrow-down"&gt;&lt;/span&gt; &lt;select ng-model="val" ng-focus="obj.focus = true" ng-blur="obj.focus = false" ng-transclude class="my-select irrelevant-class" name="reason" id="reason" data-anything="banana"&gt; &lt;option value=""&gt;Reason for Contact...&lt;/option&gt; &lt;option&gt;Banana&lt;/option&gt; &lt;option&gt;Pizza&lt;/option&gt; &lt;option&gt;The good stuff&lt;/option&gt; &lt;option&gt;This is an example of a really, really, really, really, really, really long option item&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; </code></pre> <p>...but this is what <em>actually</em> happens:</p> <pre><code>&lt;div class="faux-select my-select irrelevant-class" ng-class="{ placeholder: default == viewVal, focus: obj.focus }" name="reason" id="reason" data-anything="banana"&gt; &lt;span class="faux-value"&gt;{{viewVal}}&lt;/span&gt; &lt;span class="icon-arrow-down"&gt;&lt;/span&gt; &lt;select ng-model="val" ng-focus="obj.focus = true" ng-blur="obj.focus = false" ng-transclude&gt; &lt;option value=""&gt;Reason for Contact...&lt;/option&gt; &lt;option&gt;Banana&lt;/option&gt; &lt;option&gt;Pizza&lt;/option&gt; &lt;option&gt;The good stuff&lt;/option&gt; &lt;option&gt;This is an example of a really, really, really, really, really, really long option item&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; </code></pre> <p>Specifically, the issue is that there's no <code>name</code> attribute on the select, so it doesn't actually send the data to the server.</p> <p>Obviously, I can use a pre-compile phase to transfer the <code>name</code> and <code>id</code> attributes (that's what I am doing for now), but it would be nice if it would just automatically transfer <em>all</em> of the attributes so they can add any classes, arbitrary data, (ng-)required, (ng-)disabled attributes, etc, etc.</p> <p>I tried getting <code>transclude: 'element'</code> to work, but then I couldn't the other attributes from the template onto it.</p> <p>Note, I saw the post here: <a href="https://stackoverflow.com/questions/11703086/how-can-i-transclude-into-an-attribute">How can I transclude into an attribute?</a>, but it looks like they just manually transfer the data, and I am aiming to get it to auto-transfer all the attributes.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload