web-dev-qa-db-ja.com

ディレクティブ定義の「置換」の使用方法

このドキュメント： http://docs.angularjs.org/guide/directive では、ディレクティブのreplace設定があると述べています。

template-現在の要素をHTMLのコンテンツに置き換えます。置換プロセスは、すべての属性/クラスを古い要素から新しい要素に移行します。詳細については、以下のコンポーネントの作成セクションをご覧ください。

javascriptコード

app.directive('myd1', function(){
  return {
    template: '<span>directive template1</span>',
    replace: true
  }
});

app.directive('myd2', function(){
  return {
    template: '<span>directive template2</span>',
    replace: false
  }
});

htmlコード

<div myd1>
  original content should be replaced
</div>
<div myd2>
  original content should NOT be replaced
</div>

しかし、最終ページは次のようになります。

directive template1
directive template2

replaceは機能しないようです。私は何かを見逃していますか？

ライブデモ： http://plnkr.co/edit/rGIgmjO81X2UxJohL4HM?p=preview

angularjsangularjs-directive
79
Freewind

transclude: trueと混同され、内部コンテンツが追加されます。

replace: trueは、ディレクティブテンプレートのコンテンツが、ディレクティブが宣言されている要素（この場合は<div myd1>タグ）を置き換えることを意味します。

http://plnkr.co/edit/k9qSx15fhSZRMwgAIMP4?p=preview

たとえば、withoutreplace:true

<div myd1><span class="replaced" myd1="">directive template1</span></div>

およびwithreplace:true

<span class="replaced" myd1="">directive template1</span>

後者の例でわかるように、divタグは実際にはreplacedです。

167
checketts

ドキュメントが述べているように、 'replace'は現在の要素がディレクティブによって置き換えられるかどうかを決定します。もう1つのオプションは、基本的に子として追加するかどうかです。 plnkrのソースを見ると、replaceがfalseである2番目のディレクティブについては、divタグがまだ存在していることに注意してください。最初の指令ではそうではありません。

最初の結果：

<span myd1="">directive template1</span>

2番目の結果：

<div myd2=""><span>directive template2</span></div>
10
Ryan O'Neill

置換[True | False（デフォルト）]

効果

1.  Replace the directive element.

依存：

1. When replace: true, the template or templateUrl must be required.
5
user3454062

また、実際のルート要素の中でテンプレートのトップレベルにコメントがある場合、このエラーが発生しました。

<!-- Just a commented out stuff -->
<div>test of {{value}}</div>
0
Konstantin Isaev