Question

我注意到我的角度控制器正在增长，理想情况下应该用于传递数据。

我有一个当前包含在我的控制器中的函数，该函数从我的HTML中调用，以计算已显示的数据月数（在12个月内），如果小于12，则将剩余的数据返回为空/没有付款：

JS：

$scope.getEmptyCells = function(len){
    var emptyCells = [];
    for(var i = 0; i < 12 - len; i++){
        emptyCells.push(i);
    }
    return emptyCells;
}

HTML：

<table>
    <tr ng-repeat="payments in MyPayments">
        <th>{{payments.name}}</th>

        <td ng-repeat="paymentAmount in payments.Details.slice(0, 12)">
            {{ paymentAmount }}
        </td>
        <td ng-repeat="emptyCell in getEmptyCells(payments.Details.length)" class="empty">
            No Payment
        </td>            

    </tr>

</table>

myNewDirective：

app.directive('ngGetEmptyCells', function () {
return {
  restrict: 'EA',
  template: '<td ng-repeat="emptyCell in getEmptyCells(payments.Details.length)" class="empty">No Payment</td>',
  controller: [        
    function (len) {
      var emptyCells = [];
      console.log("ngGetEmptyCells - STARTED");
      console.log("len = " + len);
      for (var i = 0; i < 12 - len; i++) {
        emptyCells.push(i);
      }
      return emptyCells;
    }
  ]
};
});

我的新HTML：

<table>
    <tr ng-repeat="payments in MyPayments">
        <th>{{payments.name}}</th>

        <td ng-repeat="paymentAmount in payments.Details.slice(0, 12)">
            {{ paymentAmount }}
        </td>
        <ng-get-empty-cells></ng-get-empty-cells>   

    </tr>
</table>

我的小提琴：http://jsfiddle.net/oampz/8hQ3R/9/

Answer 1

您的控制器（在您的指令中）不正确。如果您这样做，可以在指令范围内设置方法getEmptyCells。

controller: function($scope) {
    $scope.getEmptyCells = function(len){
        var emptyCells = [];
        for(var i = 0; i < 12 - len; i++){
            emptyCells.push(i);
        }
        return emptyCells;
    };
}

虽然您没有在指令中声明隔离范围（没有错误），但您的指令应该能够访问您可能已经离开getEmptyCells方法的父范围。实际上，不依赖于父范围有助于保持指令模块化。

如果这不起作用，请提供一个plunker（或等效的）示例。

编辑：你真的不应该用ng作为自己的指令的前缀，因为它们被认为是原生的Angular指令

编辑：由于Angular似乎在那里工作得更好，所以我把你的小提琴移到了plunker。我发布了一个工作示例： http://plnkr.co/edit/e11zA8LKvoPTgTqW2HEE 我更改了代码以使用属性而不是元素。如果您使用E而不是A，则将角度正确插入行中似乎存在一些角度问题。

编辑：我将语法<td get-empty-cells payments="payment">更改为<td get-empty-cells="payment">以便于使用。您可以查看旧的plunker版本（通过其界面）进行比较，也许有助于理解。

Answer 2

您可以通过引用或值将数据传递到指令中。您必须通过引用传递至少getEmptyCells才能调用它。这是你如何做到的：

http://jsfiddle.net/8hQ3R/12/

使用指令：

<my-empty-cells get-empty-cells="getEmptyCells" payments="payments"></my-empty-cells>

使用引用传递getEmptyCells并按值传递来声明隔离范围：

    scope: {
        getEmptyCells: '=',
        payments: '@'
    }

<强> BUT：

您将遇到此指令模板的问题，因为它必须具有单个根元素，并且您具有多个表行。我建议使用ngRepeat通过1-12甚至数月的数组进行迭代，并使用单独的作用域函数从模型中提取实际数据或空单元格占位符。

从控制器获取功能并置于指令中

2 个答案: