javascript - AngularJS指令: Attaching a function from the controller to ng-click

Question

我在尝试编写指令来制作通用工具提示时遇到了一些麻烦，该指令接受用户 ID 作为参数以及与该 ID 关联的不同操作。每个操作在 Controller 中都有自己的方法和自己的图标。

这是 HTML

<tr ng-repeat="user in users"
    row-actions id="user.id" actions="[{'action': editUser ,'icon': 'edit'}, {'action': removeUser, 'icon': 'trash'}]">
    <td>{{user.name}}</td>
    <td>{{user.unit.name}}</td>
    <td>{{user.roleName}}</td>
    <td>{{user.active ? 'ACTIVE' : 'NON_ACTIVE' | translate}}</td>
</tr>

这是指令

myApp.directive('rowActions',['$compile', function($compile){
      return {
        restrict: 'A',
        scope: {
          id: '=',
          actions: '='
        },
        link: function (scope, element, attr) {
          var div = angular.element('<div class="row-actions"></div>');
          for (var i=0; i < scope.actions.length; i++) {
            div.append('<span class="row-action icon icon-' + action.icon + ' icon-white" ng-click="' + action.action + '(' + scope.id + ')' + '"></span>');
          }

          element.append(div);

          $compile(element);
        }
      };
    }]);

基本上，这些方法是editUser和removeUser，我希望能够将它们称为editUser(user.id)等，但我无法编译它。我尝试将它们作为字符串(“editUser”)发送，在示例中它们作为函数发送。两者都不起作用。

请看一下，谢谢

Answer 1

好吧，一个迫在眉睫的问题是您从未定义 action，因此 action.icon 和 action.action 在您的 for 中 循环会给你一个错误。

但是，即使您将其更改为 scope.actions[i].action，这仍然不起作用，因为您在当前 (隔离)范围。

相反，我认为你需要这样的东西:

for (var i=0; i < scope.actions.length; i++) {
  div.append('<span class="row-action icon icon-' 
              + scope.actions[i].icon 
              + ' icon-white" 
              + ng-click="actions['+ i + '].action(' + scope.id + ')' 
              + '"></span>');
}

但是，我认为如果您使用指令模板，整个事情会容易得多:

template.html:

<div class="row actions">
  <span ng-repeat="action in actions" 
        ng-click="action(id)" 
        ng-class="action.icon"
        class="row-action icon icon-white"></span>
</div>

这使您的指令变得更加简单

myApp.directive('rowActions',['$compile', function($compile){
  return {
    restrict: 'A',
    scope: {
      id: '=',
      actions: '='
    }
    templateUrl: 'path/to/template.html'
}]);