如何在开放层中使用 ngRepeat

Question

我正在使用 AngularJS 1.5.8 和 OpenLayers3 做一个项目。

我能够显示地图并设置各种地图组件。但是，当我在具有 ng-repeat 或 ng-if 指令的地图上设置控件时，没有显示任何内容。当我在地图之外测试代码（不是作为控件）时，它工作正常。

我已经查看了 angular-openlayers-directive 项目，但我认为它 activity 太少了，我的项目不能依赖它。

JSFiddle link 是 here。和下面相同的代码：

<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:

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);

}]);

我放置的另一个控件工作正常。以及除 ng-repeat 和 ng-if 指令之外的任何其他具有 angular 绑定的指令。

帮我看看哪里做错了。

Answer 1

我已经弄明白了。我使用了如下自定义指令：

    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);
                }
        )};
}]);

并将控制元素更改为：

<div id="lister" class="lister ol-control">
    <div style="overflow:auto; max-height: 400px;" compile="item_list" ></div>
</div>

工作的 JSFiddle 是 here

如何在开放层中使用 ngRepeat

How to Use ngRepeat with Open Layers

javascript

angularjs

openlayers-3