How can I use a function from a directive inside a controller function?

Question

I'm a newbie in AngularJS and I'm trying to use the goToUserLocation() function from the userLocation directive in the getMyPosition() function in the MapController. The reason I want to do this is that once the user clicks a button I want to take his location, zoom in to 40 and place it at the center of the map. Can someone please help me with this? Thank you. Here are the directive, the controller and a service that the directive uses:

    (function ()
{
    'use strict';

    angular
        .module('app.map')
        .directive('userLocation', userLocation);

    function userLocation(geolocation)
    {
        return {

          restrict: "A",
          link: function(scope, element, attrs){

            var ctrl = scope['vm'];
            var goToUserLocation = UserLocationFactory();
            goToUserLocation(ctrl, geolocation, ctrl.defaultLocation );

          }

        };

    }

    //Factory to build goToUserLocation function with callbacks configuration
    function UserLocationFactory(cantGetLocation, notSupportedBrowser)
    {

      return goToUserLocation;

      //function to make the map go to user location
      function goToUserLocation(vm, geolocation, defaultLocation)
      {
        resolveErrorCallbacks();
        geolocation.goToUserLocation(success, cantGetLocation, notSupportedBrowser);

        function success(position)
        {
          var location = {
              lat: position.lat,
              lng: position.lng,
              zoom: 15
          };
          configureLatlng(location);
        }

        function configureLatlng(location)
        {
          vm.map = {
            center: location
          };
        }

        function resolveErrorCallbacks(){
          if( !cantGetLocation || !( typeof cantGetLocation  === "function" ) )
          {
            cantGetLocation = function()
            {
              configureLatlng(defaultLocation);
            };
          }

          if( !notSupportedBrowser || !( typeof notSupportedBrowser  === "function" ) )
          {
            notSupportedBrowser = function()
            {
              configureLatlng(defaultLocation);
            };
          }

        }

      }

    }





})();

Here is the controller:

   (function ()
{
    'use strict';

    angular
        .module('app.map')
        .controller('MapController', MapController);

    /** @ngInject */

    function MapController($mdDialog, $mdSidenav, $animate, $timeout, $scope, $document, MapData,
                            leafletData, leafletMapEvents, api, prototypes, $window, appEnvService, geolocation) {

        var vm = this;
        vm.getMyPosition = getMyPosition;


    function getMyPosition(){
        console.log("Here is your location.");
    }

Here is a service that the directive us:

    (function() {
  'use strict';

  angular
    .module('app.map')
    .service('geolocation', geolocation);

  function geolocation() {

    /*
      success - called when user location is successfully found
      cantGetLocation - called when the geolocation browser api find an error in retrieving user location
      notSupportedBrowser - callend when browser dont have support
    */
    this.goToUserLocation = function(success, cantGetLocation, notSupportedBrowser)
    {
      if (navigator.geolocation)
      {

        navigator.geolocation.getCurrentPosition(currentPosition, function() {
          cantGetLocation();
        });

      }
      else
      {
        // Browser doesn't support Geolocation
        notSupportedBrowser();
      }

      function currentPosition(position)
      {
        var pos =
        {
          lat: position.coords.latitude,
          lng: position.coords.longitude

        };
        success(pos);
      }

    };
  }

})();

So this isn't the directive's controller? If not, would it possibly be better to make it that way? Then you can use $scope.method() — rrd, Dec 08 '16 at 14:04

score 0 · Answer 1 · edited May 23 '17 at 11:52

To call a directive function from a controller you can bind a object from the controller onto the directive using the scope '='.

<body ng-controller="MainCtrl">
  <div my-directive control="directiveControl"></div>
  <button ng-click="directiveControl.foo()">Call Directive Func</button>
  <p>{{directiveControl.fooCount}}</p>
</body>

then

app.controller('MainCtrl', function($scope) {
  $scope.directiveControl = {};
});


app.directive('myDirective', function factory() {
  return {
    restrict: 'A',
    scope: {
      control: '='
    },
    link: function(scope, element, attrs) {
      scope.directiveControl = scope.control ? scope.control : {};
      scope.directiveControl.fooCount=0;
      scope.directiveControl.foo = function() {
        scope.directiveControl.fooCount++;
      }
    }
  };
});

See this example:

https://plnkr.co/edit/21Fj8dvfN0WZ3s9OUApp?p=preview

and this question:

How to call a method defined in an AngularJS directive?

How can I use a function from a directive inside a controller function?

1 Answers1