Open Layersで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> 

作業JSFiddle here

です