google-maps - angularjsコントローラーで動的htmlコンパイルを回避する方法は?

Question

Google マップ API を使用して、情報ウィンドウ (Google マップのバルーン ウィンドウ) を表示しています。

var contentString = '<div id="content"><p>hello world</p></div>';
var infowindow = new google.maps.InfoWindow({
    content: contentString
});
//... add info window to google map object

これにより、マップ マーカーをクリックすると、バルーンに「Hello world」が表示されます。(地図マーカーは、慣れ親しんだ赤いピンのような地図上のアイコンです。

infoWindow のコンテンツを動的にしたかったので、contentStringを次のように設定しました。

"<div id='infoWindowContent' ngInclude='/Content/Static/MapPersonDetails.html'></div>";

これは、ユーザーがマップ マーカーをクリックすると、ページの DOM に挿入されます。これを機能させるには、ページの DOM に挿入されるときに、上記の行をコンパイルする必要があります。

次のようなマップの使用を抽象化するディレクティブを使用しています。

    <div class="google-map" 
         markers="markersProperty"
         on-Info-Window-Dom-Ready="onInfoWindowDomReady()">
    </div>

したがって、マップ マーカーをクリックすると、ディレクティブは infoWindow を作成し、inforWindow の domReadyEvent をサブスクライブし、infoWindowを表示し、 domReadyEventをページ コントローラーにバブルアップします。

infoWindow は、ディレクティブを介してバブルアップしたdomReadyイベントを公開し、ページ コントローラーで次のようなことを行います。

        $scope.onInfoWindowDomReady = function () {
        $scope.$apply(function () {
            var element = document.getElementById("infoWindowContent");
            $compile(element)($scope);
        });
    };

私が抱えている問題は、コントローラーで行っている dom 操作が気に入らないことです。これを行う他の方法はありますか？コンパイルをディレクティブ内に配置する必要がありますか? 次に、ディレクティブは、infoWindow のコンテンツが動的であり、コンパイルする必要があることを認識しますが、これはすべての情報ウィンドウに当てはまるわけではありません。

知っておくべき重要なことは、infoWindow のコンテンツは (静的な文字列ではなく) html 要素にすることもできるということですが、これが何らかの形で役立つかどうかはわかりません。