angularjs如何避免控制器中的动态html编译？答案

【问题标题】：angularjs how to avoid dynamic html compilation in controller?angularjs如何避免控制器中的动态html编译？
【发布时间】：2013-03-11 09:19:11
【问题描述】：

我正在使用谷歌地图 api 来显示一些信息窗口（谷歌地图气球窗口）。

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 元素（与静态字符串相反），但我不知道这是否有任何帮助。

【问题讨论】：

你有没有找到更优雅的解决方案？

标签： google-maps angularjs

【解决方案1】：

使用 angular-ui 就变得很简单了：

<div ng-controller="MapCtrl">
    <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
        ui-event="{'map-click': 'ClickOnMarker(marker)'}">
    </div>

    <div ui-map-info-window="myInfoWindow">
        <input type="text" ng-model="myText" required />
    </div>

    <div id="map_canvas" ui-map="myMap" class="map"
        ui-event="{'map-click': 'ClickMap($event)' }"
        ui-options="mapOptions">
    </div>
</div>

$scope.ClickOnMarker = function (marker) {
    $scope.myText = "Clicked on marker";
    $scope.myInfoWindow.open($scope.myMap, marker);    
};

$scope.ClickMap = function ($event) {
    var newMarker = new google.maps.Marker({
        map: $scope.myMap,
        position: $event.latLng,
        hasChanges: true,
        isSaved: false,
    });

    $scope.myMarkers.push(newMarker);
    $scope.myText = "Clicked on map";
    $scope.ClickOnMarker($scope.currentMarker);
};

希望对你有帮助！

【讨论】：