0

子要素を持つ AngularJS ディレクティブでいくつかのデータを初期化しようとしています。この場合、要素はリーフレットを使用して接続される に<map>置き換えられます。ディレクティブまたは関数に、宣言された子要素からコレクションを作成<div>する方法があるかどうかを調べようとしていました。次のようなものです。compilelinkmarkers

<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

実際には、templateUrl で derective を使用できます。そこの任意の要素に ng-transclude を配置するだけで、元のすべての子要素が独自のものになります。次に、リンク関数でそれらの DOM 要素を読み取り、好きなように処理してクリーンアップできます。

于 2013-08-01T03:43:29.977 に答える
0

OK、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 に答える