Example is here http://jsfiddle.net/nLtvkdty/
AngularJs allow change attributes in a directive template through the scope (<button ng-attr-on-touch='{{rightButtonsIntro.tap}}' ng-attr-class='{{rightButtonsIntro.type}}'>{{rightButtonsIntro.content}}</button>
). But when the attribute is a describe of binding expression look like "ng-attr-on-touch" it is not work right. I mean, how i can do to angular know that need invoke function?
UPDATE
My directive is "left-buttons-intro". It replace on
<button ng-attr-on-touch='{{rightButtonsIntro.tap}}' ng-attr-class='{{rightButtonsIntro.type}}'>{{rightButtonsIntro.content}}</button>
Then i changed the scope (Slider events) and my html did transform in
<button ng-attr-class="{{rightButtonsIntro.type}}" ng-attr-on-touch="{{rightButtonsIntro.tap}}" class="button-positive button-clear" on-touch="IntroNext()" style="">Next</button>
or
<button ng-attr-class="{{rightButtonsIntro.type}}" ng-attr-on-touch="{{rightButtonsIntro.tap}}" class="button-positive button-clear" on-touch="IntrostartApp()" style="">Next</button>
The difference is on-touch="IntrostartApp()" and on-touch="IntroNext()". After first binding AngularJS do not consider changes in on-touch attribute. My goal is invoke different function in depending from changes in scope.
DESICION
I make of the both function a one in controller and bind it with on-touch event. I just watch on the scope in the new function and invoke via eval expression. Example: on-touch="ButtonsIntro('leftbutton')" on a left button and on-touch="ButtonsIntro('rightbutton')" on a right button.
$scope.ButtonsIntro = function(type) {
eval("($scope." + $scope[type].touch +")");
}
$scope.firstCallback = function(){
console.log('first');
}
$scope.secondCallback= function(){
console.log('second');
}
Then change $scope.leftbutton.touch = 'firstCallback' on $scope.leftbutton.touch = 'secondCallback' for the dynamic binding.