Q:

How do I pass a parameter to a controller from a directive?

My HTML looks like this
<td currency-convert idrVal="{{(btcAsk.btcValue * btcAsk.btcAmnt).toFixed(2)}}"></td>

The AngularJS code
The controller has the method:
$scope.convertIDRtoUSD = function(idrValue) {

    return CurrencyConversions.convertToUSD(idrValue, 'IDR');
};

And the directive looks like..
bitcoinApp.directive("currencyConvert", function() {
return {
    restrict: 'A',
    scope: {
        idrval: '@'
    },
    template: '<span class="has-tip" tooltip="convertIDRtoUSD({{idrval}})" tooltip-animation="false">{{idrval}}</span>'
};
}); 

This is currently not calling the convertIDRtoUSD method.
Reading online, I think I'm supposed to use the Isolate Scope "&" but have not had success so far.

A:

I'll try to word this as best I can, so bear with me! Your template contains a method. At run time, it expects this method to be present on the current scope. However, at that point, the scope is the isolated scope you created with the directive, and simply contains the value of idrval, so that method is undefined.
You need to either add the function convertIDRtoUSD() to the scope of the directive, or pass the function into your directive along with idrval. If you choose the former, you'r directive might look like this:
bitcoinApp.directive("currencyConvert", function() {
return {
    restrict: 'A',
    scope: {
        idrval: '@'
    },
    template: '<span class="has-tip" tooltip="convertIDRtoUSD({{idrval}})" tooltip-animation="false">{{idrval}}</span>',
    link: function(scope) {
        scope.convertIDRtoUSD  = function(idrValue) {
            return CurrencyConversions.convertToUSD(idrValue, 'IDR');
        };
    }
};
});

If you want to pass the function in, and the function exists on the controller, your html would look something like this:
<td currency-convert my-func="convertIDRtoUSD(val)" idrVal="{{(btcAsk.btcValue * btcAsk.btcAmnt).toFixed(2)}}"></td>

And your directive:
bitcoinApp.directive("currencyConvert", function() {
return {
    restrict: 'A',
    scope: {
        idrval: '@',
        myFunc: '&'
    },
    template: '<span class="has-tip" tooltip="myFunc({val: idrval})" tooltip-animation="false">{{idrval}}</span>'
};
}); 

Some things to note - the attribute name of the function should be 'dash-named' not camel-case named, and parameters to the function passed into the directive have to be passed an an object with named values.
Hope this helps!

