なぜreplace=trueか、replace=false以下のコード内の任意の影響を持っていませんか？

replace = falseのときに「一部の既存のコンテンツ」が表示されないのはなぜですか？

またはもっと謙虚に言えばreplace=true/false、ディレクティブの機能とは何か、そしてその使用方法を親切に説明できますか？

例

JS /角度：

<script>
    angular.module('scopes', [])
          .controller('Ctrl', function($scope) {
                $scope.title = "hello";

          })
          .directive('myDir', function() {
            return {
              restrict: 'E',
              replace: true,
              template: '<div>{{title}}</div>'
            };
      });
</script>

HTML：

<div ng-controller="Ctrl">
    <my-dir><h3>some existing content</h3></my-dir>
</div>

ここのPlunkerでそれを見てください：

http://plnkr.co/edit/4ywZGwfsKHLAoGL38vvW?p=preview

あなたが持っているときreplace: true、あなたはDOMの以下の部分を取得します：

<div ng-controller="Ctrl" class="ng-scope">
    <div class="ng-binding">hello</div>
</div>

一方、replace: falseあなたはこれを得る：

<div ng-controller="Ctrl" class="ng-scope">
    <my-dir>
        <div class="ng-binding">hello</div>
    </my-dir>
</div>

したがって、replaceディレクティブのプロパティは、ディレクティブが適用さ<my-dir>れている要素（その場合）をそのままにする必要があるかどうかを示し（replace: false）、ディレクティブのテンプレートを子として追加する必要があります。

または

ディレクティブが適用されている要素は、ディレクティブのテンプレートで置き換える（replace: true）必要があります。

どちらの場合でも、（ディレクティブが適用されている）要素の子は失われます。要素の元のコンテンツ/子を保持したい場合は、それを変換する必要があります。次のディレクティブはそれを行います：

.directive('myDir', function() {
    return {
        restrict: 'E',
        replace: false,
        transclude: true,
        template: '<div>{{title}}<div ng-transclude></div></div>'
    };
});

その場合、ディレクティブのテンプレートにattributeの要素がある場合ng-transclude、そのコンテンツは要素の（ディレクティブが適用されている）元のコンテンツに置き換えられます。

トランスダクションの例を見るhttp://plnkr.co/edit/2DJQydBjgwj9vExLn3Ik?p=preview

転入の詳細については、こちらをご覧ください。

replace:true 非推奨です

ドキュメントから：

replace （[非推奨！]、次のメジャーリリースで削除されます-つまりv2.0）

テンプレートが置き換えるものを指定します。デフォルトはfalseです。

• true -テンプレートはディレクティブの要素を置き換えます。
• false -テンプレートはディレクティブの要素の内容を置き換えます。

- AngularJS総合指令API

GitHubから：

Caitp--には既知の非常にばかげた問題がありreplace: true、その多くは実際には合理的な方法で修正できないため、非推奨です。注意してこれらの問題を回避すると、より強力になりますが、新しいユーザーの利益のために、「これはあなたに頭痛を与えるでしょう、それをしないでください」と伝える方が簡単です。

- AngularJSは＃7636を発行します

更新

注：replace: true主にここにリストされている問題のため、は非推奨であり、使用は推奨されません。新しいAngularでは完全に削除されています。

置換に関する問題：true

• 属性値はマージされません
• ディレクティブはコンパイル前に重複排除されません
• transclude: element 置換テンプレートルートでは、予期しない影響が生じる可能性があります

詳細については、

• AngularJS $ compileサービスAPIリファレンス-の問題 replace:true