Angular code reuse - with libraries

by jec006

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<div class="wrapper" ng-app="App">
    <map center="[40, 20]" zoom="3" no-zoom>
        <marker latlng="[40, 30]"></marker>
        <circle latlng="[35, -25]" radius="100" color="#d23c3c"></circle>
    </map>
    <div class="seperator"></div>
    <map center="[40, -90]" zoom="3">
        <circle latlng="[38, -78]" radius="20"></circle>
        <marker latlng="[40, -85]"></marker>
        <marker latlng="[22, -105]"></marker>
        <marker latlng="[35, -120]"></marker>
    </map>
</div>

CSS

.map-holder {
    display:block;
    height:220px;
}

.seperator {
    height:0px;
    border:1px solid #999;
    margin:10px 50px;
}

JavaScript

var app = angular.module('App', []);

/**
 * NOTE: Because I'm nesting directives and expecting the scopes to reflect the DOM,
 * the map component cannot have a template / you'll have to do the transclusion yourself.
 */

app.directive('map', function() {
    return {
        scope: {
            center: '@',
            zoom: '@'
        },
        restrict: 'EA',
        link: function mapLink (scope, element, attrs) {
            element.addClass('map-holder');
            scope.map = new L.Map(element[0], {
                scrollWheelZoom: false 
            });
            new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
                attribution: 'Map data © OpenStreetMap contributors'
            }).addTo(scope.map);
            
            scope.$watch('center + zoom', function() {
                scope.map.setView(getLatLng(scope.center), scope.zoom || 2);
            });

            attrs.$observe('noZoom', function(val) {
                var func = 'enable';
                if (val != undefined) {
                    func = 'disable';
                    scope.map.zoomControl.removeFrom(scope.map);
                } else if (!scope.map.zoomControl._map) {
                    scope.map.zoomControl.addTo(scope.map);
                }

                scope.map.doubleClickZoom[func]();
                scope.map.boxZoom[func]();
            });
            
            scope.$broadcast('mapAvailable', scope.map);
        }
    };
}).directive('latlng', function() {
    return function latlngLink (scope, element, attr) {
        var cancel = angular.noop;
        scope.$watch('getShape()', function(shape) {
            if (shape) {
                cancel();
                cancel = scope.$watch(attr.latlng, function(ll) {
                    shape.setLatLng(ll);        
                }, true);
            }
        });
    }
}).directive('marker', function() {
    return {
        scope: {},
        restrict: 'EA',
       ...