我的指令无法访问角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>