Updating directive to AngularJS 1.5 .component() syntax. Adding more fine tune control.

.gitignore

@@ -0,0 +1 @@
+.idea/*

README.md

@@ -1,15 +1,13 @@
 angular-reverse-geocode
 =======================
 
-AngularJS reverse geocoding directive
-
+AngularJS reverse geocoding directive using AngularJS 1.5 component() syntax.
 
 ###Demo
 
 To see a demo and further details go to http://jasonwatmore.com/post/2014/02/15/AngularJS-Reverse-Geocoding-Directive.aspx
 
 ###Installation
-
 Install using bower: `bower install angular-reverse-geocode`
 
 Alternatively download the code and include the angular-reverse-geocode.js file in your page.
@@ -24,6 +22,16 @@ angular.module('myApp', ['angularReverseGeocode']);
 
 To use add a reverse-geocode tag to your page with attributes containing lat and long coordinates, e.g:
 
+####Optional attributes
+
+`geocode-results-index` - Google returns many levels of results. Index 0 is generally the most explicit. Default is 0.
+https://developers.google.com/maps/documentation/javascript/geocoding#reverse-geocoding-by-location
+
+`location-not-found-text` - Customize the message displayed if no location is found. Default is "Location not found".
+
+`geocode-failure-text` - Customize the message displayed when a geocoding error happens. Default is "Geocoder failed due to: " followed by the error message.
+
+
 ```html
-<reverse-geocode lat="40.730885" lng="-73.997383"></reverse-geocode>
+<reverse-geocode lat="40.730885" lng="-73.997383" geocode-results-index="0"></reverse-geocode>
 ```

angular-reverse-geocode.js

@@ -1,30 +1,39 @@
 /**
  * AngularJS reverse geocoding directive
  * @author Jason Watmore <jason@pointblankdevelopment.com.au> (http://jasonwatmore.com)
- * @version 1.0.0
+ * @author Larry Stone <larry@symbolshift.com>
+ * @version 2.0.0
  */
 (function () {
-    angular.module('angularReverseGeocode', [])
-    .directive('reverseGeocode', function () {
-        return {
-            restrict: 'E',
-            template: '<div></div>',
-            link: function (scope, element, attrs) {
-                var geocoder = new google.maps.Geocoder();
-                var latlng = new google.maps.LatLng(attrs.lat, attrs.lng);
-                geocoder.geocode({ 'latLng': latlng }, function (results, status) {
-                    if (status == google.maps.GeocoderStatus.OK) {
-                        if (results[1]) {
-                            element.text(results[1].formatted_address);
-                        } else {
-                            element.text('Location not found');
-                        }
-                    } else {
-                        element.text('Geocoder failed due to: ' + status);
-                    }
-                });
-            },
-            replace: true
-        }
+    angular.module('angularReverseGeocode', []).component('reverseGeocode', {
+        bindings: {
+            lat: '@',
+            lng: '@',
+            geocodeResultsIndex: '@?',
+            locationNotFoundText: '@?',
+            geocodeFailureText: '@?'
+        },
+        controller: function ($scope) {
+            var vm = this;
+            var defaultResultsIndex = 0;
+            var defaultLocationNotFoundText = 'Location not found';
+            var defaultGeocodeFailureText = 'Geocoder failed due to: ';
+            var geocoder = new google.maps.Geocoder();
+            var latlng = new google.maps.LatLng(vm.lat, vm.lng);
+            var resultsIndex = vm.geocodeResultsIndex || defaultResultsIndex;
+
+            geocoder.geocode({ 'latLng': latlng }, function (results, status) {
+                if (status === 'OK') {
+                    vm.address = results[resultsIndex].formatted_address;
+                } else if (status === 'ZERO_RESULTS') {
+                    vm.address = vm.locationNotFoundText || defaultLocationNotFoundText
+                } else {
+                    vm.address = vm.geocodeFailureText || (defaultGeocodeFailureText + status);
+                }
+                $scope.$apply();
+            });
+        },
+        template: '<div class="reverse-geocoded-address">{{$ctrl.address}}</div>'
     });
+
 })();

bower.json

@@ -1,8 +1,9 @@
 {
   "name": "angular-reverse-geocode",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "authors": [
-    "Jason Watmore <jason@pointblankdevelopment.com.au> (http://jasonwatmore.com)"
+    "Jason Watmore <jason@pointblankdevelopment.com.au> (http://jasonwatmore.com)",
+    "Larry Stone <larry@symbolshift.com>"
   ],
   "description": "AngularJS reverse geocoding directive",
   "main": "angular-reverse-geocode.js",
@@ -21,6 +22,6 @@
     "tests"
   ],
   "dependencies": {
-    "angular": "~1.2.16"
+    "angular": "~1.5.5"
   }
 }

demo/demo.html

@@ -10,7 +10,7 @@
 <body>
     <div class="jumbotron">
       <h1>
-        <reverse-geocode lat="40.730885" lng="-73.997383"></reverse-geocode>
+        <reverse-geocode lat="40.730885" lng="-73.997383" geocode-results-index="0"></reverse-geocode>
       </h1>
     </div>