如何在打开图层中使用ngRepeat

我在做一个使用AngularJS 1.5.8和OpenLayers3的项目。我能够显示地图并设置各种地图组件。但是，当我在具有ng-repeat或ng-if指令的地图上设置控件时，不显示任何内容。当我测试地图之外的代码（而不是控件）时，它工作正常。如何在打开图层中使用ngRepeat

我已经看过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指令之外，其他的都有角度绑定。

帮我看看我可能做错了什么。

来源

2016-10-06 maxuville

我已经弄明白了。我有一个自定义的指令去如下：

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

来源

2016-10-07 10:01:43 maxuville

如何在打开图层中使用ngRepeat

回答

相关问题