我的指令无法访问 angular 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，因此成为属性 delete-me
事件的处理程序在 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>

我的指令无法访问 angular js 中的控制器方法

my directive not able to access controller method in angular js

angularjs

angularjs-directive

ng-controller