Call a function in directive template

Question

I have a directive like this

  app.directive('clipChat', ClipChat);

function ClipChat() {
    var strfin ='*';
    var chatTemplate = '<div ng-repeat="message in newarr">   <span ng-if="message.content.slice(-1)==message.star"  ng-click="makeitTodo(message)">i <i class="fa fa-mail-forward "></i></span> '+ '</div>' ;
    var directive = {
        restrict: 'EA',
        template: chatTemplate,
        replace: true,
        scope: {
            messages: "=",
            idSelf: "=",
            idOther: "=",

        },


        link:function ($scope) {

//etc etc

I want to call the function makeitTodo when i click the span element inside my controller..

I have tested like the following.

app.controller('ChatCtrl',  ["$scope",function($scope){
 $scope.makeitTodo = function(a){
  alert(a);
}
}])

But it is not working.. PLease help me.

Answer 1

Isolated scope function binding is missing

Sample Fiddler: https://jsfiddle.net/paka2/9yda0cLk `

angular.module('myApp', []).controller('myCtrl', function($scope) {
    $scope.makeitTodo = function(message) {
    console.log(message);
    }
}).directive('clipChat', function() {
    return {
    restrict: "E",
        scope: { done: '&' },
        template: '<input type="text" ng-model="message">'+
        '<button ng-click="done({message:message})"> click me </button>'
    }
});;

`