AngularJS : Passing value from directive to controller

Question

Sorry for duplicating the question. But I found something useful and updated with it.

This is my directive :

App.directive('mapUsa', [function() {

return {

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

        element.vectorMap({
            map: 'us_aea_en',
            backgroundColor: 'transparent',
            zoomButtons: false,
            regionStyle: {
                initial: {
                    fill: '#343434' 
                },
                hover: {
                    fill: '#242424'
                }
            },
            markerStyle: {
                initial: {
                    fill: '#F0A518',
                    stroke: '#F0A518',
                }
            },
            onRegionClick: function(event, code) {

            },
            markers: [
                {latLng: [37.78, -122.41], name: 'San Francisco', style: {r: 10}},
                {latLng: [40.71, -74], name: 'New York City', style: {r: 15}},
                {latLng: [41.89, -87.62], name: 'Chicago', style: {r: 5}},
                {latLng: [34.00, -118.25], name: 'Los Angeles', style: {r: 20}},
                {latLng: [34.00, -106.00], name: 'New Mexico', style: {r: 10}},
                {latLng: [44.50, -100.00], name: 'South Dakota', style: {r: 13}},
                {latLng: [25.78, -80.22], name: 'Miami', style: {r: 7}},
            ]
        });

    },
    controller: ['$scope', 'citiesData', function($scope, citiesData) {

        citiesData.getCitiesData()

        .then(function(data) {
            $scope.cities = data;

        }, function(errorStatus) {
            $scope.errorStatus = errorStatus;
        })



    }]

}

}])

In my controller I'm loading a json file and I can of course access it with my HTML using the angular expression.

But now on the onRegionClick I get the code of the cities whenever I click on a region.

And this is how JSON looks like.

{ "US-AL": { "name": "Alabama", "population": 4833722 }, "US-AK": { "name": "Alaska", "population": 735132 }

I have created JSON objects with code I get from the onRegionClick.

I wanted to print out the population count from the city code I get on onRegionClick and passing to it the controller and then finally using that code to get the data from JSON.

Please do help me out in this. As I didn't seriously couldn't understand on how to pass a param value from directive to a controller.

In my HTML I used expression like this from the variable created in the controller.

{{ cities.AL.name }}

It is ofc working fine. But I wanted to replace the AL with the code I get from the onRegionClick.

Thanks in advance.

have you tried my answer on your other question? answer on duplicate version — Raphael Müller
– Raphael Müller, Commented Jul 28, 2014 at 9:25
Object can generally communicate with each other using events. Angular has emitter/listener methods available on the scope and rootScope which can be used. As in $on, $emit, $brodcast. See stackoverflow.com/questions/14502006/… for difference between $emit and $broadcast — GillesC
– GillesC, Commented Jul 28, 2014 at 9:44
I tried this onRegionClick: function(event, code) {scope.cityCode = code console.log(scope.cityCode);}, Actually it does output the city code in the console whenever I click on the regions. But I'm unable to access the cityCode using the angular expression. — Unknown User
– Unknown User, Commented Jul 28, 2014 at 10:10

Raphael Müller · Accepted Answer · 2014-07-28 09:30:30Z

0

How about using a filter? Maybe you can use the angular default filter and display the filtered data.

json:

{
   {
      "code": "US-AL",
      "name": "Alabama",
      "population": 4833722
   }, {
      "code": "US-AK",
      "name": "Alaska",
      "population": 735132
   }
}

html:

<tr ng-repeat="city in cities | filter:inputCode">
   <td>{{city.name}}</td>
</tr>

answered Jul 28, 2014 at 9:30

Raphael Müller

2,2002 gold badges16 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Unknown User Over a year ago

My json doesn't look like it and I wanted to access the code param which I get on the onRegionClick.

Unrealsolver Over a year ago

How about $rootScope?

Unknown User Over a year ago

To add $rootScope in directive?

Collectives™ on Stack Overflow

AngularJS : Passing value from directive to controller

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related