Callback function inside directive attr defined in different attr

Question

So I have this directive called say, mySave, it's pretty much just this

app.directive('mySave', function($http) {    return function(scope, element, attrs) {       element.bind("click", function() {           $http.post('/save', scope.data).success(returnedData) {               // callback defined on my utils service here                // user defined callback here, from my-save-callback perhaps?           }       });    } }); 

the element itself looks like this

<button my-save my-save-callback="callbackFunctionInController()">save</button> 

callbackFunctionInController is for now just

$scope.callbackFunctionInController = function() {     alert("callback"); } 

when I console.log() attrs.mySaveCallback inside my-save directive, it just gives me a string callbackFunctionInController(), I read somewhere that I should $parse this and it would be fine, so I tried to $parse(attrs.mySaveCallback) which gave me back some function, but hardly the one I was looking for, it gave me back

function (a,b){return m(a,b)}  

What am I doing wrong? Is this approach flawed from the beginning?

Answer 1

So what seems like the best way is using the isolated scope as suggested by ProLoser

app.directive('mySave', function($http) {    return {       scope: {         callback: '&mySaveCallback'       }       link: function(scope, element, attrs) {         element.on("click", function() {             $http.post('/save', scope.$parent.data).success(returnedData) {                 // callback defined on my utils service here                  scope.callback(); // fires alert             }         });       }    } }); 

For passing parameters back to controller do this

[11:28] <revolunet> you have to send named parameters  [11:28] <revolunet> eg my-attr="callback(a, b)"  [11:29] <revolunet> in the directive: scope.callback({a:xxx, b:yyy})