Angularjs 带传单的角

下面的directie代码来自 我想得到一个包含很多lat和long的json提要。。我可以用$resource或$http轻松地获取json，但如何将其提供给此指令以在映射上映射东西呢

module.directive('sap', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function(scope, element, attrs) {
            var map = L.map(attrs.id, {
                center: [40, -86],
                zoom: 10
            });
            //create a CloudMade tile layer and add it to the map
            L.tileLayer('http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png', {
                maxZoom: 18
            }).addTo(map);

            //add markers dynamically
            var points = [{lat: 40, lng: -86},{lat: 40.1, lng: -86.2}];
            for (var p in points) {
                L.marker([points[p].lat, points[p].lng]).addTo(map);
            }
        }
    };
});

module.directive（'sap'，function（）{
返回{
限制：'E'，
替换：正确，
模板：“”，
链接：函数（范围、元素、属性）{
var map=L.map（属性id{
中间：[40，-86]，
缩放：10
});
//创建CloudMake平铺层并将其添加到地图中
L.tileLayer（'http://{s}.tile.cloudmake.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png'{
最大缩放：18
}).addTo（地图）；
//动态添加标记
var点=[{lat:40，lng:-86}，{lat:40.1，lng:-86.2}]；
对于（以点为单位的var p）{
L.标记器（[p点].lat，p点].lng]）.addTo（地图）；
}
}
};
});

我对传单或您要做的事情不太了解，但我假设您想将一些坐标从控制器传递到指令

实际上有很多方法可以做到这一点。。。其中最好的是利用范围

以下是将数据从控制器传递到指令的一种方法：

module.directive('sap', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function(scope, element, attrs) {
            var map = L.map(attrs.id, {
                center: [40, -86],
                zoom: 10
            });
            //create a CloudMade tile layer and add it to the map
            L.tileLayer('http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png', {
                maxZoom: 18
            }).addTo(map);

            //add markers dynamically
            var points = [{lat: 40, lng: -86},{lat: 40.1, lng: -86.2}];
            updatePoints(points);

            function updatePoints(pts) {
               for (var p in pts) {
                  L.marker([pts[p].lat, pts[p].lng]).addTo(map);
               }
            }

            //add a watch on the scope to update your points.
            // whatever scope property that is passed into
            // the poinsource="" attribute will now update the points
            scope.$watch(attr.pointsource, function(value) {
               updatePoints(value);
            });
        }
    };
});

---

我最近使用和构建了一个应用程序。与您描述的非常相似，包括来自JSON文件的位置数据。我的解决方案类似于

以下是基本流程

我的一个页面上有一个

元素。然后我有一个指令，用传单映射替换

元素。我的设置稍有不同，因为我在工厂中加载JSON数据，但我已经根据您的用例对其进行了调整（如果有错误，请道歉）。在指令中，加载JSON文件，然后在每个位置循环（您需要以兼容的方式设置JSON文件）。然后在每个lat/lng处显示一个标记

HTML

---

angularJs中的指令和mvc是不同的技术。指令通常在页面加载时执行。指令更多用于处理html和xml。一旦有了JSON，那么最好使用mvc框架来完成工作

页面呈现后，要应用指令，通常需要执行$scope.$apply（）或$compile在页面上注册更改

无论哪种方式，将服务引入指令的最佳方式都是使用依赖项注入框架

我注意到指令中缺少scope:true或scope:{}。这对指令与父控制器的配合有很大影响

app.directive('mapThingy',['mapSvc',function(mapSvc){
  //directive code here.

}]);

app.service('mapSvc',['$http',function($http){
 //svc work here.
}])

指令由camelCase匹配应用。由于IE的问题，我会避免使用或。替代方法是

<div map-thingy=""></div>

---

假设在控制器中

$scope.points = // here goes your retrieved data from json

您的指令模板是：

<sap id="nice-map" points="points"/>

另外，建议您先将标记添加到L.featureGroup，然后再将该L.featureGroup添加到地图，而不是将标记直接添加到地图中，因为它具有clearLayers（）方法，这将在更新标记时为您省去一些麻烦

grupo = L.featureGroup();
grupo.addTo(map);

for (var p in points) {
    L.marker([p.lat, p.lng]).addTo(grupo);
}


// remove all markers
grupo.clearLayers();

---

我希望这有帮助，干杯以上的回答非常有帮助。。我想做的一件事就是清除函数中的所有标记。。你知道吗？如果你只是通过重新初始化数组来重置它，angular并不总是会触发，我相信你已经尝试过了。所以首先您可以尝试：

$scope.pointsFromController=[]这可能不起作用。。。如果这不起作用，那么您可以手动删除这些项：
$scope.pointsFromController.splice（0，$scope.pointsFromController.length）
app.directive('mapThingy',['mapSvc',function(mapSvc){
  //directive code here.

}]);

app.service('mapSvc',['$http',function($http){
 //svc work here.
}])

<div map-thingy=""></div>

$scope.points = // here goes your retrieved data from json

<sap id="nice-map" points="points"/>

module.directive('sap', function() {
return {
    restrict: 'E',
    replace: true,
    scope:{
      points:"=points"
    },
    link: function(scope, element, attrs) {
        var map = L.map(attrs.id, {
            center: [40, -86],
            zoom: 10
        });
        L.tileLayer('http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png', {
            maxZoom: 18
        }).addTo(map);

        for (var p in points) {
            L.marker([p.lat, p.lng]).addTo(map);
        }
    }
};
});

grupo = L.featureGroup();
grupo.addTo(map);

for (var p in points) {
    L.marker([p.lat, p.lng]).addTo(grupo);
}


// remove all markers
grupo.clearLayers();