}

Question

我的指示：

'<tr ng-repeat="item in listGroup">' +
        '<th scope="row">{{$index + 1}}</th>' +
        '<td><a href="#/groups/{{item.id}}">{{item.name}}</a></td>' +
        '<td ng-if="!listAll">{{item.users.length}}</td>' +
        '<td ng-if="!listAll">_</td>' +
        '<td>{{item.createdAt}}</td>' +
        '<td><button type="submit" class="btn btn-default" ng-click="remove(item)">remove</button></td>' +
  scope: {
   listName: "@",
   listGroup: "=",
   listAll: "=",
   submit: "&",
   remove: "&"

HTML：

  <table-list
list-name="users"
list-group="usersGroup"
list-all="usersAll"
submit="submit()"
remove="remove()">
  </table-list

控制器：

$scope.remove = function(username) {
    console.log(username);
/*
    AV.Cloud.run('updateUserGroup', {
      groupName: $scope.group.name,
      users: _.pluck(selectedUsers, 'name'),
      op: "add"
    }, {
*/

我不太确定在remove="remove()">中要在HTML中添加什么应该接收参数，但是参数在指令中。

如何让remove()获得参数item.name？

Answer 1

可以使用=

将函数名称作为对隔离范围的引用传递

JS

 scope: {
   listName: "@",
   listGroup: "=",
   listAll: "=",
   submit: "&",
   remove: "="

HTML

 <table-list
    list-name="users"
    list-group="usersGroup"
    list-all="usersAll"
    submit="submit()"
    remove="remove"><!-- Note "()" deleted -->
  </table-list>

现在您可以将参数传递给指令内部或html

中的引用函数

Answer 2

指令： use: ng-click="remove({itemToRemove:item})"

在HTML中：

<table-list
list-name="users"
list-group="mainAppCtrlAs.usersGroup"
list-all="usersAll"
submit="submit()"
remove="mainAppCtrlAs.remove(itemToRemove)">

在控制器中：

self.remove = function(itemToRemoveIs)
 {
     alert("Remove This\nId: = " + itemToRemoveIs.id + "\nName = " + itemToRemoveIs.name);

}

完整代码：

<!doctype html>
<script      src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">  </script>
<script>
var appModule = angular.module('mainApp', []);  
</script>

<html ng-app="mainApp">
<head>    
 <script src="mainAppCtrl.js"></script>
</head>
<body>
<h2>Todo</h2>
<div ng-controller="mainAppCtrl as mainAppCtrlAs"> 

        <table-list
            list-name="users"
            list-group="mainAppCtrlAs.usersGroup"
            list-all="usersAll"
            submit="submit()"
            remove="mainAppCtrlAs.remove(itemToRemove)">
        </table-list>   

</div>
</body>
</html>

控制器： mainAppCtrl.js

 appModule.controller('mainAppCtrl', function() {
 self = this;

 self.userGrp1 = {};
 self.userGrp1.id   = '01';
 self.userGrp1.name = 'Manager';
 self.userGrp1.users = ['Ashish','Ravi'];

 self.userGrp2 = {};
 self.userGrp2.id   = '02';
 self.userGrp2.name = 'Developer';
 self.userGrp2.users = ['krishan','Geeta','Ritu'];     

 self.usersGroup = [self.userGrp1,self.userGrp2];   

  self.remove = function(itemToRemoveIs)
  {
     alert("Remove This\nId: = " + itemToRemoveIs.id + "\nName = " +    itemToRemoveIs.name);        
   }     
  });


  appModule.directive('tableList', [function() {
  return {
      template: '<div ng-repeat="item in listGroup">'  +
                '<th scope="row">{{$index + 1}}</th>' +
                '<td><a href="#/groups/{{item.id}}">{{item.name}}</a></td>'     +
                '<td ng-if="!listAll">{{item.users.length}}</td>' +
                '<td ng-if="!listAll">_</td>' +
                '<td>{{item.createdAt}}</td>' +
                '<td><button type="submit" class="btn btn-default" ng-  click="remove({itemToRemove:item})">remove</button></td>' + 
                '</div><br>',    

     scope: {
           listName : "@",
           listGroup: "=",
           listAll: "=",
           submit: "&",
           remove: "&"          
            }  //scope   

      }; //return
    }]);

如何让控制器中的函数访问指令中的参数？

2 个答案:

}