내 지시선이 각도 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>