[解決済み] ディレクティブ定義の `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タグは確かに に置き換わっています。 .
関連
-
[解決済み] Angular ng-repeatの条件付きラップアイテム(ng-repeatのグループアイテム)。
-
[解決済み] どのようにangularJSでrouteProviderとlocationProviderを設定するのですか?
-
[解決済み] ngInject'を本当に書く必要があるのか?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?
-
[解決済み] 入力フィールドにフォーカスを当てるには?
-
[解決済み】AngularJSのディレクティブスコープにおける「@」と「=」の違いは何ですか?
-
[解決済み】AngularJS - ng-modelを使用するディレクティブを作成します。
-
[解決済み】ディレクティブ定義のtranscludeオプションの理解?
-
[解決済み] AngularJSのカスタムディレクティブの「replace」機能を使うには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Angularjs accordion ng-click on panel-header
-
[解決済み] プリフライト応答が成功しない
-
[解決済み] AngularJs ReferenceError: $http is not defined
-
[解決済み] AngularJSのディープリンクとは何ですか?
-
[解決済み] ディレクティブ '...' が要求するコントローラ 'ngModel' が見つかりません。
-
[解決済み] エラーです。[$injector:unpr] 不明なプロバイダです。ルートプロバイダ
-
AngularJSのベストプラクティス。ng-repeatの$indexに注意する。
-
[解決済み] なぜAngularJSはselectに空のオプションを含めるのですか?
-
[解決済み] AngularJSでコントローラを2回実行する場合の対処法
-
[解決済み] AngularJSのディレクティブで `replace` プロパティが非推奨なのはなぜですか?重複