Моя директива не может получить доступ к методу контроллера в угловых js

Question

Я действительно не знаю, почему это не должно работать ... пожалуйста, помогите определить причины.

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

// Данные для друзей

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); 
     } 

    }) 

// директива элемент для друзей

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

// friends.php шаблон

<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 страница

<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

Не уверен, что вы имеете в виду, не работает. Только изменился, что нужно сделать было:

• события называется DeleteMe и, таким образом, становится атрибутом удалить-меня
• обработчик для события на FriendsCtrl и должно быть, таким образом приставке по frndCtrl

См код ниже:

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>