Question

我想创建从数组生成完整表的指令，提供特定的onMouseOver行为，单击单元格时，强调具有相同值的所有单元格（以及其他特定行为）这个例子并不重要。）

// AngularJS controller
$scope.myArrayOfValues = [[0,1,2,3,4],[5,6,7,8,9]];
// Page HTML
<my-table-directive values='myArrayOfValues'></my-table-directive>

我已经考虑过以下方法，但我不确定它们是否是针对此类问题的最佳做法。

NB。为简洁起见，下面的代码段只是从数组生成表，但不提供上述的附加行为。

（1）使用指令'template'属性

app.directive('myTableDirective', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            values: '='
        },
        template: '<table class="ffrs-table">' +
                '<tr>' +
                  '<th ng-repeat="cell in data.labels">{{cell}}</td>' +
                '</tr>' +
                '<tr ng-repeat="row in data.values track by $index">' +
                  '<td class="centered" ng-repeat="cell in row track by $index">{{cell}}</td>' +
                '</tr>' +
              '</table>',
        link: function(scope, elem, attrs)
        {
            //elem.children() does not return tr/th/td DOM elements
        }
    };
});

但是这种方法不允许link函数中的表DOM元素操作，因此它们似乎不存在于此函数中。

（2）创建jQuery表

app.directive('myTableDirective', function() {
    return {
        restrict: 'E',
        replace: false,
        scope: {
            values: '='
        },
        link: function(scope, elem, attrs)
        {
            scope.$watch( 'tableData', function(val)
            {
                if( val ) {
                    var row;
                    for( var t=0; t<val.values.length; t++ ) {
                        row = angular.element('<tr></tr>');
                        for( var f=0; f<val.values[t].length; f++ ) {
                            row.append( '<td>' + val.values[t][f] + '</td>');
                        }
                        elem.append( row );
                    }
                }
                elem.addClass('my-table-css-class');
            }
        }
    };
});

在这种方法中，仍然存在一个问题，因为addClass调用似乎适用于该元素，因为在之前增加了tr / td元素。

（3）ng-repeat并在每个tr / th / td元素上使用指令 这是一种我没有测试过的方法，因为我要显示的表格超过20个，表格代码在HTML文件中越短越好......

所以问题是：什么是正确的方法？或者也许没有一个是正确的，这样的问题应该以另一种方式解决？

Answer 1

我相信你走在正确的轨道上＃1。我建议不要在链接函数中尝试完成所需的操作，而是建议使用由ng-click和ng-mouseover触发的函数向该指令添加控制器：

controller: ['$scope', function MyTableController($scope) {
  $scope.doSomething = function() {
    // your code here
  };

  $scope.highlightSameValues = function(cell) {
    // your code here
  };
}];

因此，举例来说，如果您想要鼠标悬停并点击每个单元格时发生某些“事情”，请将td更改为以下内容：

<td
  class="centered"
  ng-repeat="cell in row track by $index"
  ng-mouseover="doSomething()"
  ng-click="highlightSameValues(cell)">
  {{cell}}
</td>

正确的方法来编写AngularJS指令以从数组生成表

1 个答案: