0

我正在尝试使用子元素初始化 AngularJS 指令中的一些数据。在这种情况下，<map>元素被替换为<div>使用传单连接的 a。我试图弄清楚指令compile或函数中是否有某种方法可以从声明的子元素link填充集合，如下所示：markers

<div ng-app="dashboard">
<div ng-controller="DashboardCtrl">
    <map id="devicemap" tile-handle="test.map-fy18v14h" min-zoom="3" max-zoom="9" markers="markers">
        <marker lat="44" lng="-88.5" description="From the Server (Razor)" />
        <marker lat="44.1" lng="-88.6" description="From the Server 2 (Razor)" />
    </map>
</div>

在指令中，我想遍历<marker>元素以填充集合。这应该在编译中发生吗？或者，我是否误以为我可以在插入实际模板之前访问我的“假 DOM”？

module.directive('map', function () {
return {
    restrict: "E",
    replace: true,
    scope: {
        markers: "=markers"
    },
    template: '<div class="map"></div>',
    link: function link(scope, elm, attributes) {
        var map = L.map(attributes.id, {
            dragging: true,
            zoomAnimation: true
        }).setView([45.505, -88.09], 6);
        L.tileLayer('http://{s}.tiles.mapbox.com/v3/' + attributes.tileHandle + '/{z}/{x}/{y}.png', {
            attribution: "<a href='http://mapbox.com/about/maps' target='_blank'>Terms & Feedback</a>",
        }).addTo(map);

        // This is where I am stuck... is there a way to get the "marker" elements?   
        // the following does not work...
        var markerElements = elm.children('marker');  

        // now would like to loop over markerElements, grab the attributes and add them 
        // to the map (and/or the markers collection).

    };
});

我可以使用 ajax 调用填充标记，但是，这种技术将允许我在第一次请求页面时预先填充服务器上的数据。

4

2 回答 2

0

好的，在 Mark Rajcok 的提示下，我想出了一个解决方案。这允许我使用在服务器上生成的自定义 HTML 元素在地图上设置标记。我需要使用该list变量来存储函数中收集的数据compile。不确定是否有更简洁的方法可以使用 Angular 执行此操作。

HTML/剃刀

<div ng-app="dashboard">
    <div ng-controller="DashboardCtrl">
        <map id="devicemap" tile-handle="example.map-fy18v14h" min-zoom="3" max-zoom="9" markers="markers">
        @foreach (var location in Model.Locations)
        {
           <marker lat="@location.Lat" lng="@location.Lng" description="@location.Description" ></marker>                                   
        }
        </map>
     </div>
</div>

控制器

var module = angular.module('dashboard', ['map-directive']);
module.controller("DashboardCtrl", function ($scope, $http) {
     $scope.markers = [];
});

指示

var mapDirective = angular.module("map-directive", []);

mapDirective.directive('map', function () {

    var list = [];

    function link (scope, elm, attributes) {
        var map = L.map(attributes.id, {
            dragging: true,
            zoomAnimation: true
        }).setView([45.505, -88.09], 6);

        scope.markers = list;

        L.tileLayer('http://{s}.tiles.mapbox.com/v3/' + attributes.tileHandle + '/{z}/{x}/{y}.png', {
            attribution: "<a href='http://mapbox.com/about/maps' target='_blank'>Terms & Feedback</a>",
        }).addTo(map);

        scope.$watch('markers', function (newValue, oldValue) {
            if (newValue)
                angular.forEach(scope.markers, function (marker) {
                    L.marker([marker.lat, marker.lng], { draggable: marker.draggable }).addTo(map).bindPopup(marker.description);
                });
        });
    }

    return {
        restrict: "E",
        scope: {
            markers: "=markers"
        },

        compile: function(tElement, tAttrs, transclude) {

            console.log(tElement);
            console.log(tElement.find("marker"));

            var markers = tElement.find("marker");


            angular.forEach(markers, function (marker) {
                list.push({ lat: marker.attributes.lat.value, lng: marker.attributes.lng.value, description: marker.attributes.description.value});
            });

            var htmlText = '<div class="map" id="' + tAttrs.id + '" ></div>';
            tElement.replaceWith(htmlText);
            return link;
        }
    };

});
于 2013-03-28T20:42:05.797 回答
0

实际上，您可以将 derective 与 templateUrl 一起使用。只需将 ng-transclude 放在那里的任何元素上，它就会拥有所有原始子元素。然后在链接功能中，您可以读取这些 DOM 元素，做任何您想做的事情并清理它们。

于 2013-08-01T03:43:29.977 回答