Skip to content

Instantly share code, notes, and snippets.

@onjiro
Last active August 29, 2015 14:05
Show Gist options
  • Save onjiro/0946f3292da08705b60a to your computer and use it in GitHub Desktop.
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
Copy link
Author

onjiro commented Aug 8, 2014

タグの生成なのでlinkではなくcompileを使ったほうがよいかも。
・・・と思ったけど、$selectControllerに依存してしまうので、link内で処理する必要がありました。
(compile時点では$selectControllerが生成されていない)

linkとcompileの使い分けについて
http://angularjsninja.com/blog/2013/11/22/angularjs-custom-directives/
(optionディレクティブのcompileが実行されないのはcompileの性質によるものでした。)

@onjiro
Copy link
Author

onjiro commented Aug 8, 2014

$compile使えば動的に生成したタグにcompileかけれる模様。
これで、optionタグ直書きの場合と同じ扱いにできるので、データが静的な場合は問題なさそう。

データを動的にする場合、$watchCollectionをかける必要があるので全く同じやり方ではできないので注意必要そう

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment