私は選択置換ディレクティブを作成して、デザインに従って選択を簡単にスタイルアップできるようにしました (つまり、ディレクティブがそれを行います!)。
属性は、配置した場所にトランスクルージョンせずng-transclude
、ルート要素に移動するだけであることに気づきませんでした。
ここに例があります: http://plnkr.co/edit/OLLntqMzbGCJS7g7h1j4?p=preview
見栄えが良いことがわかります... しかし、大きな欠点が 1 つあります。および属性は転送されていませんid
。name
これname
がないと、サーバーに投稿されません (このフォームは既存のシステムに結び付けられるため、モデルの AJAX 処理はオプションではありません)。
たとえば、これは私が始めるものです:
<select class="my-select irrelevant-class" name="reason" id="reason" data-anything="banana">
<option value="">Reason for Contact...</option>
<option>Banana</option>
<option>Pizza</option>
<option>The good stuff</option>
<option>This is an example of a really, really, really, really, really, really long option item</option>
</select>
...これは私がそれをどのように見せたいかです:
<div class="faux-select" ng-class="{ placeholder: default == viewVal, focus: obj.focus }">
<span class="faux-value">{{viewVal}}</span>
<span class="icon-arrow-down"></span>
<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">
<option value="">Reason for Contact...</option>
<option>Banana</option>
<option>Pizza</option>
<option>The good stuff</option>
<option>This is an example of a really, really, really, really, really, really long option item</option>
</select>
</div>
...しかし、これは実際に起こることです:
<div class="faux-select my-select irrelevant-class" ng-class="{ placeholder: default == viewVal, focus: obj.focus }" name="reason" id="reason" data-anything="banana">
<span class="faux-value">{{viewVal}}</span>
<span class="icon-arrow-down"></span>
<select ng-model="val" ng-focus="obj.focus = true" ng-blur="obj.focus = false" ng-transclude>
<option value="">Reason for Contact...</option>
<option>Banana</option>
<option>Pizza</option>
<option>The good stuff</option>
<option>This is an example of a really, really, really, really, really, really long option item</option>
</select>
</div>
具体的にはname
、選択に属性がないため、実際にはデータがサーバーに送信されないという問題があります。
明らかに、プリコンパイル フェーズを使用してname
およびid
属性を転送できますが (これが現在行っていることです)、すべての属性を自動的に転送して、任意のクラス、任意のデータ、 (ng-)required、(ng-)disabled 属性など。
作業を開始しようとtransclude: 'element'
しましたが、テンプレートから他の属性をテンプレートに追加できませんでした。
注: ここで投稿を見ました: How can I transclude into an attribute? 、しかし、データを手動で転送しているように見えます。すべての属性を自動転送することを目指しています。