ESRI Angular directive

gistfile1.js

// ESRI directive.
angular.module('esri', []).directive('esri', function() {
  return {
    scope: {
      address: '=',
      zoomable: '=',
      enabled: '='
    },
    link: function(scope, element, attrs) {
      var map;
      scope.$watch('enabled', function(newValue, oldValue) {
        // Map is enabled.
        if (newValue) {
          require(['esri/map', 'esri/tasks/locator'], function(Map, Locator) {
            // Map options.
            var options = {
              zoom: 17,
              basemap: 'streets',
            }

            // If zoomable, put slider in top-left. Otherwise, set min and max
            // zoom to zoom level (which restricts zooming), disable smart
            // navigation, and disable the slider.
            if (scope.zoomable) {
              options.sliderPosition = 'top-left';
            }
            else {
              options.minZoom = options.zoom;
              options.maxZoom = options.zoom;
              options.smartNavigation = false;
              options.slider = false;
            }

            // Render map.
            map = new Map(attrs.id, options);

            // Setup geocode locator.
            var locator = new Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");

            // After geocoding, center map at first address.
            locator.on('address-to-locations-complete', function(result) {
              if (result.addresses.length > 0) {
                map.centerAt(result.addresses[0].location);
              }
            });

            // Geocode address.
            locator.addressToLocations({address: {SingleLine: scope.address}});
          });
        }

        // Map is no longer enabled, destroy.
        else {
          if (map) {
            map.destroy();
          }
        }
      });
    }
  }
});

gistfile2.html

<link rel="stylesheet" href="//js.arcgis.com/3.8compact/js/esri/css/esri.css">
<script src="//js.arcgis.com/3.8compact/"></script>

<div id="map" esri address="property | address:'premise'" zoomable="1" enabled="mapMode"></div>