angularjs - HTMLをAngularディレクティブに渡す方法は?

Question

テンプレートを使用して角度ディレクティブを作成しようとしていますが、div 内の HTML も失いたくありません。たとえば、HTML からディレクティブを呼び出す方法は次のとおりです。

<div my-dir>
  <div class="contents-i-want-to-keep"></div>
</div>

次に、私の指示があります：

app.directive('myDir', [ '$compile', function($compile) {
return {
    restrict: 'E',
    link: function(scope, iElement, iAttrs){
        // assigning things from iAttrs to scope goes here
    },
    scope: '@',
    replace: false,
    templateUrl: 'myDir.html'
};
}]);

そして、新しい要素を定義する myDir.html があります。

<div class="example" style="background: blue; height: 30px; width: 30px"></div>

replace を false に設定しても、内部の contents-i-want-to-keep div が失われます。Angular ドキュメントについての私の理解では、これはテンプレートの後に追加されるというものでした。結果が

<div class="example" style="background: blue; height: 30px; width: 30px">
     <div class="contents-i-want-to-keep"></div>
</div>

ありがとう！