javascript - 在自定义指令中，如何在生成模板之前执行逻辑？

Question

我想编写一个自定义指令，它接受一个字符串数组，并将其呈现到一个表中，如下所示:

'string1'  | 'string2'  | 'string3'  | 'string4'
'string5'  | 'string6'  | 'string7'  | 'string8'
'string9'  | 'string10' | 'string11' | 'string12'

应该像这样使用:

<div class="my-directive" values="values" rowsize="4"></div>

我认为实现此目的的适当策略是首先将值拆分为大小为rowsize的数组。然后，渲染一个带有内部 ng-repeat 的 ng-repeat。因此指令输出的 DOM 看起来像这样:

<table>
    <tr ng-repeat="part in parts">
        <td ng-repeat="value in part">
            {{value}}
        </td>
    </tr>
</table>

这意味着在指令中我需要首先执行一些逻辑(将数组拆分为更小的数组)，然后使用ng-repeat> 如上所示。

这个指令也可以使用手动 DOM 操作来编写，但我想以“Angular”方式做事:)

那么，问题是:在自定义指令中，如何先做一些逻辑(通常在 link 函数中完成)，然后生成模板(通常放在 模板 属性)？

Answer 1

这应该可以解决问题:http://plnkr.co/edit/UYMQtMuZeJRcSQynHUGW?p=info

基本上，我们需要动态创建包含项目数组的行对象。如果我们还没有达到允许的最大列数(由通过 maxColumns 传递到指令中的内容指定)，我们只想添加到这个项目数组中:

正如您将通过 plunker 看到的，您可以修改 HTML 中的 max-columns 属性，并且该指令应该正确绘制:

app.controller('MainCtrl', function($scope) {
  $scope.values = [
    'string1','string2','string3','string4','string5','string6',
    'string7','string8','string9','string10','string11','string12'
  ];
});

app.directive('myTable', function() {

  var templateHtml = 
      '<table border="1">' +
          '<tr ng-repeat="row in rows">' + 
              '<td ng-repeat="item in row.items">{{item}}</td>' +
          '</tr>' + 
      '</table>';

  return {
    restrict: 'E',
    template: templateHtml,
    scope: {
      values: '=',
      maxColumns: '@'
    },
    link: function(scope, element, attrs) {

        scope.rows = [];
        scope.rows.push(_getNewRow())

        function _getNewRow() {
          return { items: [] };
        }

        _.each(scope.values, function(value) {
            currentRow = _.last(scope.rows);
            if (currentRow.items.length < scope.maxColumns) {
               currentRow.items.push(value);
            } else {
               currentRow = _getNewRow();
               currentRow.items.push(value);
               scope.rows.push(currentRow);
            }
        });

    }
  }
});