-
-
Save onjiro/0946f3292da08705b60a to your computer and use it in GitHub Desktop.
| angular.module('colorsOptionDirective').directive('colorsOption', ['$compile', function($compile) { | |
| var colors = ["red", "yellow", "blue"]; | |
| compile: function(element, attr) { | |
| var optionTemplate = angular.element(document.createElement('option')); | |
| for (var i = 0; i < colors.length; i++) { | |
| $compile(optionTemplate.clone() | |
| .val(colors[i]) | |
| .text(colors[i]) | |
| .appendTo(element)); | |
| } | |
| } | |
| }]); |
onjiro
commented
Aug 8, 2014
- $timeout 必要なかった
- ng-model と組み合わせた時に unknown option が生成されてしまう
- select ディレクティブが先に処理されてしまうのが問題のような気がする( https://github.com/angular/angular.js/blob/master/src/ng/directive/select.js#L192 )
- select も含めて生成するようなディレクティブにすれば一応の解決はしそうだが、、、ng-optionsと同じような形に合わせたいところ。。。
priority を設定して、select より先に処理されるようにしてもダメだった。処理順の問題ではないのか。。。
https://docs.angularjs.org/api/ng/service/$compile#-priority-
一応できた。
- select ディレクティブ側で、option の value 一覧を持っている
- ng-model が設定されている場合、select ディレクティブ内で値を検索して selected を追加している
- 一致する option がなければ空の option を追加する
select ディレクティブの option 一覧をどうやって設定しているか？
- ng-options を使用する場合は select ディレクティブ側で ng-options まで扱っていて、そこで設定している(setupAsOption - https://github.com/angular/angular.js/blob/master/src/ng/directive/select.js#L250)
- option を html に直書きの場合は option ディレクティブ側で select ディレクティブの option value 一覧に追加してやっている(https://github.com/angular/angular.js/blob/master/src/ng/directive/select.js#L613)
ただ、colors の値を操作する必要がある場合は$watchとかいれる必要があるかも。もうちょっと中身ちゃんと調べないと変なこと起きそう。。。
option と ng-model については select ディレクティブに密接に関わっているのでなかなかややこしい...
linkじゃなくて、compile時にoptionタグを生成したら、optionディレクティブ側でうまいことやってくれないかと思ったけど、うまくいかない模様。
生成したタグに対してはoptionディレクティブが効かないのか、効くけど処理が次回以降のループにまわってしまうのか...
生成したoptionタグに対してはoptionディレクティブのcompileは実行されないことを確認。
この挙動はng-optionsを利用した場合も同じく。
タグの生成なのでlinkではなくcompileを使ったほうがよいかも。
・・・と思ったけど、$selectControllerに依存してしまうので、link内で処理する必要がありました。
（compile時点では$selectControllerが生成されていない）
linkとcompileの使い分けについて
http://angularjsninja.com/blog/2013/11/22/angularjs-custom-directives/
(optionディレクティブのcompileが実行されないのはcompileの性質によるものでした。)
$compile使えば動的に生成したタグにcompileかけれる模様。
これで、optionタグ直書きの場合と同じ扱いにできるので、データが静的な場合は問題なさそう。
データを動的にする場合、$watchCollectionをかける必要があるので全く同じやり方ではできないので注意必要そう