Angular, Sending information from directive to controller

Question

I have found a few good examples of doing this but am having trouble. I have a click function that I want to send some info to my controller from my directive. The function looks like so -

 function selected(info){
        scope.changeSelect = info;
        console.log(info);
    }

Pretty straight forward - so far this works fine, the console.log shows what i need it to show. After this point I think I have something incorrect. It looks like so.

In the top of my directive I have my scope set like so

scope: {
      changeSelect: "&"
}

Then next to the html directive call inline I have this

change-select="onChange(changedVal)" >

and then in my controller I have

$scope.onChange = function(changedVal) {
$scope.myPick = changedVal;
console.log("hit");
};

This part is not getting a hit - i am not sure what I am doing wrong here and could use a second pair of eyes. Thanks!

Don't know if this helps, but gutted out the non relevant parts and dropped it into an (non working) fiddle to make this a bit more clear -

http://jsfiddle.net/aubxhak3/1/

score 1 · Answer 1 · answered Feb 13 '15 at 19:58

At first glance it seems like even though you bind the function using &, you haven't called it anywhere in your link function. You could try:

return {
 template: '<div id="map"></div>',
  restrict: 'EA',
  scope: {
      newInfo: "&"
  },
  link: function (scope, element, attrs) {
        scope.newInfo(); // Call it here

        function selected(info){ // Not sure what this does
        scope.newInfo = info;
        console.log(info);
    }

  }
};

As an alternative (just in case i've misinterpreted with the above): this solution seems intuitive. Note: that the controller would be the subscriber in your case.

Angular, Sending information from directive to controller

1 Answers1