1. ホーム
  2. angularjs

[解決済み] ディレクティブ定義の `replace` はどのように使用するのですか?

2023-05-26 02:33:25

質問

このドキュメントでは http://docs.angularjs.org/guide/directive があると書かれています。 replace の構成でディレクティブを指定します。

テンプレート - は、現在の要素を 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

どのように解決するのですか?

と混同している transclude: true と混同しているようですが、これは内部のコンテンツを追加するものです。

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

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

例えば を使わずに replace:true

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

そして replace:true

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

後者の例でわかるように、divタグは確かに に置き換わっています。 .