angularjs如何避免在控制器中動態編譯html？

我使用谷歌地圖API顯示一些infowindow（谷歌地圖氣球窗口）。angularjs如何避免在控制器中動態編譯html？

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'。（地圖標記在地圖就像你使用的紅色針腳上的圖標

我想要的信息窗口的內容是動態的，所以我設置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>

所以，在地圖上標記點擊時，該指令將創建信息窗口，請訂閱inforWindow的domReadyEvent，顯示信息窗口，並泡了domReadyEvent頁面控制器。

信息窗口暴露出domready中事件，我冒泡通過該指令，我做這樣的事情在我的頁面控制器：

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

我遇到的問題是，我不就像我在控制器中做的dom操作一樣。有沒有其他辦法可以做到這一點？我應該把編譯內部的指令？然後該指令會知道infoWindow內容是動態的並且必須進行編譯，但對於所有信息窗口都不是這樣。

重要的是要知道infoWindow內容也可以是一個html元素（而不是靜態字符串），但我不知道這是否可以幫助以任何方式。

來源

2013-03-11 Liviu Trifoi

您是否曾經找到過更優雅的解決方案？ – 2013-10-16 01:29:15

採用了棱角分明的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); 
};

希望它能幫助！

來源

2013-05-11 02:48:31 Dashu

angularjs如何避免在控制器中動態編譯html？

回答

相關問題