Verwendung von ngRepeat mit geöffneten Layern

Question

Ich mache ein Projekt mit AngularJS 1.5.8 und OpenLayers3.

Ich kann die Karte anzeigen und die verschiedenen Kartenkomponenten festlegen. Wenn ich jedoch ein Steuerelement auf der Karte mit den Anweisungen ng-repeat oder ng-if einstelle, wird nichts angezeigt. Wenn ich den Code außerhalb der Karte (nicht als Kontrolle) teste, funktioniert es gut.

Ich habe bereits das angular-openlayers-directive Projekt angeschaut, aber ich denke, es hat zu wenig Aktivität, um davon für mein Projekt abhängig zu sein.

Der JSFiddle-Link lautet here. Und der gleiche Code unter:

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

}]); 

Die andere Kontrolle stellte ich habe funktioniert. Und alle anderen, die eckige Bindungen haben, mit Ausnahme der ng-repeat- und ng-if-Anweisungen.

Hilf mir zu sehen, was ich falsch machen könnte.

Answer 1

Ich habe es geschafft, es herauszufinden. Ich ging mit einer benutzerdefinierten Richtlinie wie folgt:

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

und verändert das Steuerelement zu:

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

Die Arbeits JSFiddle ist here