私の指示が角度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であるため、前置する必要があります削除 - 私を
• を属性次のようになりますだけして行われるために必要なことを変更しました

  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>

  ：によってfrndCtrl

は、以下のコードを参照してください。