Pass $http from Controller to Directive

Question

I need to use $http.get to grab a json file in my controller:

module.controller 'SampleMapController', ($http, $scope) ->
    $http.get('../../highcharts/mapdata/world.geo.json').
        success (data) ->
            $scope.mapData = data # works and logs out correctly

And pass that into a directive, which uses that json for mapping purposes:

module.directive 'MapDirective', () ->
    require: '?SampleMapController'
    templateUrl: '../template.html'
    link: ($scope) ->
        console.log $scope.mapData # undefined
        $scope.$watch 'an.object.that.contains.more.data',
            (newValue) ->
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container div'
                    }
                    # ... use $scope.mapData somewhere in here to render the global map
                })
            true

But I'm not having any luck accessing that $scope, and not sure if I should be putting it on the $rootScope, or event require the controller.

I'm generating a high charts map inside of the link:

A detailed explanation of what I'm looking for is in an abstracted JSBin.

Answer 1

You cant inject $scope in directives , instead you can pass scope in your link function in the directive

      your should use this : 


      link:function(scope,element,attributes){ // Notice to the function scope

         // Now you have access to the scope , and you can do whaterver you want .

       }

NOTE In dependency injection philosophy , In your controller's you can inject $scope as an dependency , and $ sign is known in angularJS .And the other thing is , dependency injection in controllers does not follow any order , I mean consider this :

  app.controller('YouController',function($scope,$location,$http,...){
       // You see in the injection , I injected $scope first , but it doesn't matter , I mean I can inject $location first , and then $scope , and ...
      // So there is no order here !

     // your stuff here
  });

But in directives , order of passing dependencies into the link function is Important, on the other hand , names are not important !

  app.directive('yourdirective',function(){// you cannot inject $scope here !
      return {

          link : function(scope,element,attributes){// order is important
               // anything that comes first , is scope 
               // Second is always element 
               // Third is always attributes 
               // So you could do this : 
               // function(scooooope,elem,att)
               // See I changed the names , because here names are not important , but the order is important
             }
        }
      });

Edit : cleared your code : :(

   module.directive('MapDirective',function(){
    return{
       require: '?SampleMapController'
       templateUrl: '../template.html'
       link: function(scope){
           console.log scope.mapData 
         // Please test , if still undefiend ;
       }
      }
   })