[英]How to Use ngRepeat with Open Layers
I'm doing a project using AngularJS 1.5.8 and OpenLayers3. 我正在使用AngularJS 1.5.8和OpenLayers3做一个项目。
I'm able to display the map and set the various map components. 我能够显示地图并设置各种地图组件。 However when I set a control on the map that has either ng-repeat or ng-if directives, nothing is displayed.
但是,当我在具有ng-repeat或ng-if指令的地图上设置控件时,什么也不显示。 When I test the code outside of the map (not as a control) it works fine.
当我在地图之外(而不是作为控件)测试代码时,它可以正常工作。
I have already looked at the angular-openlayers-directive project but I think it has too little activity to depend on it for my project. 我已经看过有角度的openlayers指令项目,但是我认为它的活动很少,因此无法依靠它进行我的项目。
The JSFiddle link is here . JSFiddle链接在这里 。 And the same code below:
和下面的相同代码:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol.css"></link>
<style>
.lister {
top: 5em;
left: 0.5em;
}
</style>
<div ng-app="myApp">
<div ng-controller="MapsController">
<div id="map" class="map"></div>
<div id="lister" class="lister ol-unselectable ol-control">
<div ng-repeat="item in items" ng-click="showMarkerPopup($index)">
{{item.name}}
</div>
</div>
<div id="other" class="other ol-unselectable ol-control">
Other Object
</div>
</div>
</div>
JS: JS:
var app = angular.module('myApp', []);
app.controller('MapsController',['$scope','$window','$compile',function($scope,$window,$compile){
var lister = angular.element(document.querySelector('#lister'));
$compile(lister)($scope);
var listerControl = new $window.ol.control.Control({
element: $window.document.getElementById('lister')
});
$scope.items = [{
name: "ball",
color: "blue"
}, {
name: "tree",
color: "green"
}, {
name: "house",
color: "red"
}];
$window.map = new $window.ol.Map({
layers: [new $window.ol.layer.Tile({
source: new $window.ol.source.OSM()
})],
target: 'map',
view: new $window.ol.View({
center: window.ol.proj.transform([36.823219, -1.288811], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
})
});
$window.map.addControl(listerControl);
}]);
The other control I have placed works fine. 我放置的另一个控件工作正常。 And any other that have angular bindings except the ng-repeat and ng-if directives.
以及具有ng-repeat和ng-if指令之外的其他所有具有角度绑定的对象。
Help me look at what I could be doing wrong. 帮我看看我可能做错了什么。
I have managed to figure it out. 我设法弄清楚了。 I went with a custom directive as follows:
我使用了一个自定义指令,如下所示:
app.directive('compile', ['$compile', function ($compile) {
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
return scope.$eval(attrs.compile);
},
function(value) {
element.html(value);
$compile(element.contents())(scope);
}
)};
}]);
And changed the control element to: 并将控制元素更改为:
<div id="lister" class="lister ol-control">
<div style="overflow:auto; max-height: 400px;" compile="item_list" ></div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.