带动态参数的AngularJS pass函数指令

Question

TL; DR版本：我试图编写一个指令来显示表中的各种对象，并在表行末尾添加一个编辑/删除按钮。

的例子实体将是项目类型，所以：

项目type.controller.js

// determines which attributes we want to show in the table 
    $scope.attr = [ 
     'computerName', 
     'shortName', 
     'longName' 
    ]; 

    // puts the current projectType object to the form 
    $scope.edit = function(projectType) { 
     $scope.projectType = projectType; 
     $scope.computerName = projectType.computerName; 
     $scope.isEdit = true; 
    }; 

    // shows a delete modal window 
    $scope.deleteConfirm = function (projectType) { 
     Modal.confirm.deleteModal('Project type', projectType.computerName, function() { 
      Message.createMessage('project-type.message.delete.success', { projectType: projectType.computerName }, { type: 'warning', timeout: 4000 }); 

      $scope.remove(projectType); 
     })(); 
    }; 

项目type.html

<!-- show table with directive --> 
    <entity-table object="projectTypes" entity="'project-type'" attr="attr"></entity-table> 

    <!-- show table without directive -->   
    <table class="table table-responsive"> 
     <thead> 
     <tr> 
      <th>{{ 'project-type.create.label.computerName' | translate }}</th> 
      <th>{{ 'project-type.create.label.shortName' | translate }}</th> 
      <th>{{ 'project-type.create.label.longName' | translate }}</th> 
      <th>{{ 'common.operations' | translate }}</th> 
     </tr> 
     </thead> 

     <tbody> 
     <tr ng-repeat="projectType in projectTypes"> 
      <td><strong>{{ projectType.computerName }}</strong></td> 
      <td>{{ projectType.shortName }}</td> 
      <td>{{ projectType.longName }}</td> 
      <td> 
       <a ng-click="edit(projectType)" class="pencil"><span class="glyphicon glyphicon-pencil"></span></a> 
       <a ng-click="deleteConfirm(projectType)" class="trash"><span class="glyphicon glyphicon-trash"></span></a> 
      </td> 
     </tr> 
     </tbody> 
    </table> 

实体table.directive.js

angular.module('unioffice-centralApp') 
.directive('entityTable', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     transclude : true, 
     templateUrl: '/components/directives/entity-table/entity-table.html', 
     scope: { 
      object: '=', 
      entity: '=', 
      attr: '=' 
     }, 
     link: function (scope, element, attrs, controllers, transclude) { 
      console.log(scope); 
     } 
    }; 
}); 

实体table.html

<div> 
<table class="table table-responsive"> 
    <thead> 
    <tr> 
     <th ng-repeat="att in attr">{{ (entity + ".table.label." + att) | translate }}</th> 
     <th ng-repeat-end translate>common.operations</th> 
    </tr> 
    </thead> 

    <tbody> 
     <tr ng-repeat="obj in object"> 
      <td ng-repeat="att in attr">{{ obj[att] }}</td> 
      <td ng-repeat-end> 
       <a ng-click="edit(obj)" class="pencil"><span class="glyphicon glyphicon-pencil"></span></a> 
       <a ng-click="deleteConfirm(obj)" class="trash"><span class="glyphicon glyphicon-trash"></span></a> 
      </td> 
     </tr> 
    </tbody> 
</table> 

（存在于实体table.html的最后一个/ DIV，计算器似乎杀吧）

所以现在的问题是：如何我是否将edit（）和deleteConfirm（）函数传递给指令以使其工作？

在这幅图中，你可以看到两个表是相同的，但是第一个中的按钮在这一点上显然不会做任何事情:(我也知道第二个按钮有粗体第一列，没关系，这就是不是现在的点）

Answer 1

传/从控制器到该指令以相同的方式完成结合用作与区别在于它是如何在指令中引用的绑定的对象=或字符串@

在指令中传递如下所示的属性：

<entity-table object="projectTypes" entity="'project-type'" on-delete="deleteConfirm" on-edit="edit" attr="attr"></entity-table> 

在你的指令做..

angular.module('unioffice-centralApp') 
.directive('entityTable', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     transclude : true, 
     templateUrl: '/components/directives/entity-table/entity-table.html', 
     scope: { 
      object: '=', 
      entity: '=', 
      attr: '=', 
      onDelete: '&', // function referencing 
      onEdit: '&' // function referencing 
     }, 
     link: function (scope, element, attrs, controllers, transclude) { 
      scope.deleteFn = function (obj) { 
       scope.onDelete()(obj); // this invokes the deleteConfirm function in the controller 
      } 

      scope.editFn = function (obj) { 
       scope.onEdit()(obj); // this invokes the deleteConfirm function in the controller 
      } 
     } 
    }; 
}); 

在你的控制器......

$scope.edit = function(projectType) { 
    $scope.projectType = projectType; 
    $scope.computerName = projectType.computerName; 
    $scope.isEdit = true; 
}; 

// shows a delete modal window 
$scope.deleteConfirm = function (projectType) { 
    Modal.confirm.deleteModal('Project type', projectType.computerName, function() { 
     Message.createMessage('project-type.message.delete.success', { projectType: projectType.computerName }, { type: 'warning', timeout: 4000 }); 

     $scope.remove(projectType); 
    })(); 
}; 

PLUNKR