帶動態參數的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