0

I'm trying to figure out how to wire up a custom validator with ngMessages that has access to the parent scope. I have an input field for an address and onBlur I want to do a geolocate of the address and update the position of a marker on a map (by setting two variables on the controllers this).

Custom validator examples use directives (and I have followed those for a basic example) but can't move from their to geolocation, as I'm struggling with Directive to parent Controller communication in the context of ES6, ControllerAs,...:

  • I've started off trying to access the parent controller from the link function with scope.$parent (How to access parent scope from within a custom directive *with own scope* in AngularJS?) but I'm using ES6 classes and it just did not seem to work.
  • now I'm thinking about passing in the parent function to the Directive, but the function is complaining that it cannot find elements of the controller's normal scope, so that means it cannot update the marker's position.

Grateful for advice on wiring this up.

Here's where I got to in the second instance

var checkAddressDir = function($timeout) {
  return {
    require : 'ngModel',
    scope: {
      geolookup: '&'
    },
    link : function(scope, element, attrs, ngModel) {
      function setAsLoading(bool) {
        ngModel.$setValidity('recordLoading', !bool); 
      }

      ngModel.$parsers.push(function(value) {
        if(!value || value.length == 0) return;

        setAsLoading(true);

        scope.geolookup()(value)
        // scope.$parent.findAddress()
        .then( res => {
            // I'll use res to update ngModel.$setValidity
            console.log(res);
            setAsLoading(false);
        });
        // THE FOLLOWING SERVED TO GET ME STARTED
        // $timeout(function() {
        //     console.log("timeout");
        //     setAsLoading(false);
        // }, 1000);

        return value;
      })
    }
  }
}

And this is the controller function I need to be able to use with the controller's scope

findAddress(address) {
        return this.$q( (resolve, reject) => {
            mygeocoder.geocode(myOptions, (res, stat) => {
                if (stat === google.maps.GeocoderStatus.OK) {
                    if (res.length > 1) {
                        console.log(`Need unique result, but got ${res.length}`);
                        return "notUnique";
                    }
                    var loc = res[0].geometry.location;
                    this.resto.lat = loc.lat();
                    this.resto.lng = loc.lng();
                    this.zoom = 16;
                    this.$scope.$apply();
                    return "good";
                } else {
                    console.log(" not found - try again?");
                    return "notFound";
                }
            });
        });
Community
  • 1
  • 1
Simon H
  • 20,332
  • 14
  • 71
  • 128
  • You can remove the `scope` definition on your directive which defaults to `scope : false` which means your directive and it's parent share the same scope object. – Arkantos Jan 08 '16 at 09:46
  • thanks, you prompted to relook at what was on `scope` and this time I found at `scope.vm` the function I needed. I had tried this before with less success so thanks for pushing me once again – Simon H Jan 08 '16 at 10:54

0 Answers0