Question

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

这是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）等，但我无法进行编译。我尝试将它们作为字符串发送（＆＃39; editUser＆＃39;），在示例中它们作为函数发送。两者都不起作用。

请看一下，谢谢

Answer 1

嗯，一个直接的问题是你永远不会定义action，因此action.icon循环中的action.action和for会给你一个错误。

但是，即使您将其更改为scope.actions[i].action，这仍然无效，因为您在当前（隔离）范围内没有editUser属性。

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

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'
}]);

AngularJS指令：将功能从控制器附加到ng-click

1 个答案: