How do I store a variable in my controller whose value I get after DOM has loaded?

Question

angular.element(document).ready(function () {
        vm.myLocation= document.getElementById('myLocation').innerHTML;
    });

How do I store this so that I can use this later?

edit ---

I found a guide here (http://jasonwatmore.com/post/2014/02/15/AngularJS-Reverse-Geocoding-Directive.aspx) that lets me find the location of a user based on lat/long.

I am trying to get the location name value (ie. Seattle, WA, USA) that is loaded so that I can use that when creating a new user post and push it to the DB when user submits the post. Not sure what is the best way of doing this.

Answer 1

If we modify the provided directive slightly, we can actually make it two-way bind back to your controller so you can then use the resulting value.

Let's look at the modified directive first, and then I'll go over the new pieces one by one:

return {
 restrict: 'E',
 template: '<div>{{location}}</div>',
 scope: {
   location: '=',
   onLocationFound: '&'
 },
 link: function(scope, element, attrs) {
   var geocoder = new google.maps.Geocoder();
   var latlng = new google.maps.LatLng(attrs.lat, attrs.lng);

   function setLocation(location) {
     console.log("setting location", location);
     scope.$apply(function() {
       scope.location = location;
       scope.onLocationFound({
         location: location
       });
     });
   }

   geocoder.geocode({
     'latLng': latlng
   }, function(results, status) {
     if (status == google.maps.GeocoderStatus.OK) {
       if (results[1]) {
         setLocation(results[1].formatted_address);
       } else {
         setLocation('Location not found');
       }
     } else {
       setLocation('Geocoder failed due to: ' + status);
     }
   });
 },
 replace: true
}

Using isolate scope, we can provide a sort of API to the consumers of our directive and use that to bind back to our controller:

 scope: {
   location: '=',
   onLocationFound: '&'
 }

This little addition allows us to provide two new attributes location and on-location-found that can be used in concert to do pretty much exactly what you want.

The = means that that value will be two-way bound, and the & is an expression that will be evaluated when we want it, giving us a way to signal the consumer of our directive.

Inside our directive instead of writing directly to the DOM, we change our template to bind to the location property instead.

template: '<div>{{location}}</div>'

And then whenever the API call is finished, we can update the scope value, as well as execute our expression function like so:

 scope.$apply(function() {
   scope.location = location;
   scope.onLocationFound({
     location: location
   });
 });

The scope.$apply is needed to kick off a digest loop and ensure the DOM get's updated.

The call to onLocationFound will execute our expression, and pass in whatever parameters we provide as key/value pairs in the form of an object.

The result is that we can then use it in markup like this:

There is a a lot you can do with directives and I encourage you to read up on the documentation to really get a better understanding of what is happening.

I've taken the liberty of putting this all together in a working snippet below.

(function() {

  function reverseGeocodeDirective() {
    return {
      restrict: 'E',
      template: '<div>{{location}}</div>',
      scope: {
        location: '=',
        onLocationFound: '&'
      },
      link: function(scope, element, attrs) {
        var geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(attrs.lat, attrs.lng);

        function setLocation(location) {
          console.log("setting location", location);
          scope.$apply(function() {
            scope.location = location;
            scope.onLocationFound({
              location: location
            });
          });
        }

        geocoder.geocode({
          'latLng': latlng
        }, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
              setLocation(results[1].formatted_address);
            } else {
              setLocation('Location not found');
            }
          } else {
            setLocation('Geocoder failed due to: ' + status);
          }
        });
      },
      replace: true
    }
  }

  function MyCtrl() {
    var _this = this;

    _this.location = "Nowhere";
    _this.locationFound = function(location) {
      _this.message = "Location was found";
    };
  }

  angular.module('my-app', [])
    .directive('reverseGeocode', reverseGeocodeDirective)
    .controller('myCtrl', MyCtrl);


}());

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div ng-app="my-app" ng-controller="myCtrl as ctrl">
  <reverse-geocode lat="40.730885" lng="-73.997383" 
                   location="ctrl.location"
                   on-location-found="ctrl.locationFound(location)">
  </reverse-geocode>

  <h3><code>ctrl.location = </code>{{ctrl.location}}</h3>
  <h3><code>ctrl.message = </code>{{ctrl.message}}</h3>
</div>

Answer 2

Can you try broadcasting the changes from your directive and add a watch in your controller for this change ?

Something similar to https://stackoverflow.com/a/25505545/3131696.

More info on broadcasting, http://www.dotnet-tricks.com/Tutorial/angularjs/HM0L291214-Understanding-$emit,-$broadcast-and-$on-in-AngularJS.html