my directive not able to access controller method in angular js

Question

I really don't know why this should not work... please help spot the reasons.

var app = angular.module("schoolBook", []);

// Data for friends

app.factory("friendsData", function(){
return  [
{id:'1', name:'Abraham Daudu', group:'Melon Guys', phone :'07058963254'},
{id:'2', name:'Kunle Ayodele', group:'Java', phone :'06025897568'},
{id:'3', name:'Chinedu Opiaobodo', group:'PHP', phone :'08158173641'},
{id:'4', name:'Duru Chidi', group:'Angular JS', phone :'07067022329'},
{id:'5', name:'Peter Uduak', group:'Excel', phone :'08165423589'},
{id:'6', name:'Ikechukwu Uchenna', group:'Java', phone :'0905869752'},
{id:'7', name:'Fred Akpovwe', group:'MS Word', phone :'0805648279'}
];      
})



// controller for friends
    app.controller("FriendsCtrl", function(friendsData){
        this.friends = friendsData;

        this.deleteFriend = function(userId){
            alert("deleting "+userId);
        }

    })

// directive element for friends

app.directive("friends", function(){
        return {
            restrict : "E",
            scope : {
                name : "@",
                group : "@",
                phone : "@",
                id : "@",
                deleteMe : "&"
            },
            templateUrl : "inc/widget/friends.php"
        }
    })

// friends.php template

<div class="col-xs-10 col-sm-5 user-info2">
    <div class="col-xs-5 col-sm-4 col-md-3" style="padding-top:10px;">
        <img src="res/default.png" class="frnd-img" />
    </div>
    <div class="col-xs-7 col-sm-8 col-md-9 friend-info">
        <span class="friend-label">Name</span> <br /> {{name}}<br />
        <span class="friend-label">Group</span> <br /> {{group}}<br />
        <span class="friend-label">Phone</span> <br /> {{phone}}<br />
        <button  class="btn btn-danger btn-xs" ng-click="deleteMe({userId : id})">
            <i class="fa fa-trash"></i> Delete friend
        </button>
    </div>
</div>

// html page

<div ng-controller="FriendsCtrl as frndCtrl">
                <div ng-repeat="frnd in frndCtrl.friends">
                    <friends name="{{frnd.name}}" group ="{{frnd.group}}" phone="{{frnd.phone}}" id="{{frnd.id}}" deleteMe = "deleteFriend(id)"></friends>
                </div>
            </div>

Answer 1

Not sure what you mean doesn't work. The only changed that needed to be made was:

• The event is named deleteMe and thus becomes the attribute delete-me
• The handler for the event is on the FriendsCtrl and should thus be prefixed by frndCtrl

See code below:

var app = angular.module("schoolBook", []);

// Data for friends

app.factory("friendsData", function(){
return  [
{id:'1', name:'Abraham Daudu', group:'Melon Guys', phone :'07058963254'},
{id:'2', name:'Kunle Ayodele', group:'Java', phone :'06025897568'},
{id:'3', name:'Chinedu Opiaobodo', group:'PHP', phone :'08158173641'},
{id:'4', name:'Duru Chidi', group:'Angular JS', phone :'07067022329'},
{id:'5', name:'Peter Uduak', group:'Excel', phone :'08165423589'},
{id:'6', name:'Ikechukwu Uchenna', group:'Java', phone :'0905869752'},
{id:'7', name:'Fred Akpovwe', group:'MS Word', phone :'0805648279'}
];      
})



// controller for friends
    app.controller("FriendsCtrl", function(friendsData){
        this.friends = friendsData;

        this.deleteFriend = function(userId){
            alert("deleting "+userId);
        }

    })
// directive element for friends

app.directive("friends", function(){
        return {
            restrict : "E",
            scope : {
                name : "@",
                group : "@",
                phone : "@",
                id : "@",
                deleteMe : "&"
            },
            template : '<div class="col-xs-10 col-sm-5 user-info2">'+
    '<div class="col-xs-5 col-sm-4 col-md-3" style="padding-top:10px;">'+
        '<img src="res/default.png" class="frnd-img" />'+
    '</div>'+
    '<div class="col-xs-7 col-sm-8 col-md-9 friend-info">'+
     '   <span class="friend-label">Name</span> <br /> {{name}}<br />'+
     '   <span class="friend-label">Group</span> <br /> {{group}}<br />'+
     '   <span class="friend-label">Phone</span> <br /> {{phone}}<br />'+
     '   <button  class="btn btn-danger btn-xs" ng-click="deleteMe({userId : id})">'+
       '     <i class="fa fa-trash"></i> Delete friend'+
      '  </button>'+
   ' </div>'+
'</div>'
        }
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<div ng-app="schoolBook">


<div ng-controller="FriendsCtrl as frndCtrl">
                <div ng-repeat="frnd in frndCtrl.friends">
                    <friends name="{{frnd.name}}" 
                             group ="{{frnd.group}}" 
                             phone="{{frnd.phone}}" 
                             id="{{frnd.id}}" 
                             delete-me="frndCtrl.deleteFriend(id)"></friends>
                </div>
            </div>
  
 </div>