Как использовать ngRepeat с открытыми слоями

Question

Я занимаюсь проектом с использованием AngularJS 1.5.8 и OpenLayers3.

Я могу отобразить карту и установить различные компоненты карты. Однако, когда я устанавливаю элемент управления на карте с директивами ng-repeat или ng-if, ничего не отображается. Когда я тестирую код за пределами карты (а не как элемент управления), он работает нормально.

Я уже посмотрел проект angular-openlayers-directive, но я думаю, что у него слишком мало активности, чтобы зависеть от него для моего проекта.

Ссылка JSFiddle - 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.

Помогите мне взглянуть на то, что я могу делать неправильно.

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> 

The рабочей JSFiddle является here