ng-repeat 内で動的にディレクティブを作成しようとしています。directive-writer他の多くのディレクティブを作成する がありますが、 はディレクティブ属性を出力していdirective-writerないようです。したがって、ディレクティブの 2 番目のセットはレンダリングされません。
完全なデモについては、この Plunkerを参照してください。
要するに、私はこのディレクティブタグを持っています:
<div ng-repeat="dir in directives" directive-writer
directive-text="{{ dir.text }}" directive-type="{{ dir.directive }}"></div>
スコープ データ:
$scope.directives = [
{ directive: 'one', text: 'I am One' },
{ directive: 'two', text: 'I am Two' },
{ directive: 'three', text: 'I am Three' }
];
ディレクティブの定義:
.directive('directiveWriter', function() {
return {
restrict: 'A',
compile: function(tElement, tAttrs) {
tElement.html('<div say="' + tAttrs.directiveText + '" '
+ tAttrs.directiveType + '>' + tAttrs.directiveType + '</div>');
}
};
さらに 3 つのディレクティブはすべて次のようになります。
.directive('one', function() {
return {
restrict: 'A',
replace: true,
template: '<h3 class="one"></h3>',
compile: function(tElement, tAttrs) {
tElement.text('One says, ' + tAttrs.say);
}
};
問題は、値を属性としてのみテキストとして書き出さないことですdirectiveWriter...tAttrs.directiveType
したがって、レンダリングされた HTML は次のようになります。
<div say="I am One" {{ dir.directive }} class="ng-binding">one</div>
「three」が div 内でテキストとしてレンダリングされる場合、問題はありませんが、属性としてレンダリングされることはありません。
理解できない：
- テキスト「three」を div 内でテキストとしてバインドできるが、属性としてバインドできないのはなぜですか。
- クラスが「ng-binding」に設定されている理由。