Angularjs 如何为发票表单创建和设置嵌套控制器数组？

由于发票行计算的复杂性，我需要创建一张发票，使发票行成为独立的控制器。
我的问题是: 如何定义InvoiceLine控制器的数组并使用ng repeat绑定它们

我是个新手，在淘汰赛中我是这样做的：

var invoiceTest=angular.module（“invoiceTest”，[]）；
invoiceTest.controller(
“发票头”，
职能（$范围）{
//如何定义？$scope.InvoiceLine=[控制器数组]
$scope.VAT=0.17；
$scope.TotalNoVat=？？？；//需要计算$scope.InvoiceLine.TotalCost的总和
$scope.TotalInvluceVAT=函数（）{
返回（$scope.TotalNoVat*（1＋$scope.VAT））.toFixed（2）；
};
}
);
控制器（“InvoiceLine”，
职能（$范围）{
$scope.Description=“”；
$scope.Quantity=1；
$scope.Cost=0；
$scope.TotalCost=函数（）{
返回（$scope.Quantity*$scope.Cost）.toFixed（2）；
};
//更复杂的计算和ajax。。。
}
);

如果发票行项目有一个UI组件（我可以想象它有），那么这听起来是一个利用

该指令将包含显示发票行项目所需的逻辑，并且可以包含（通过其控制器）计算显示行项目的值所需的逻辑

如果您希望进一步分离关注点，还可以创建一个保存逻辑以计算行项目值的方法，这样做的好处是允许您在不需要涉及显示逻辑的情况下对计算逻辑进行单元测试

下面是如上所述使用的服务和指令的真实基本示例（使用

MainInvoiceController

保存

行项目

）：

invoiceTest.controller（“MainInvoiceController”，函数（$scope）{
//lineItem指令将在用户更改时更新数量和成本
//更改输入值，并随时重新计算TotalCost
//数量或成本变化。
$scope.lineItems=[
{
说明：“第1项”，
数量：2，
费用：2.00，
总成本：4.00
},
{
说明：“项目2”，
数量：10，
费用：4.00，
总成本：40.00
},
]
});
服务（“InvoiceCalculationService”，函数（）{
//计算行项目的总成本，以及
//更新行项目的TotalCost属性
this.updateTotalCost=函数（lineItemData）
{
lineItemData.TotalCost=lineItemData.Quantity*lineItemData.Cost；
}
});
指令（“lineItemDisplay”，函数（InvoiceCalculationService）{
返回{
限制：“AE”，
范围：{
//lineItemData应包含以下属性：
//描述
//数量
//成本
//总成本
行项目：“=”
},
控制器：函数（$scope、$element、$attrs）{
this.recreacteTotal=函数（）{
InvoiceCalculationService.updateTotalCost（$scope.lineItem）；
}
},
模板：“说明：”
“数量：”+
“成本：”+
'总计：{{lineItem.TotalCost}}'
}
});

这是正在使用的指令，带有“ng repeat”：

<div data-ng-controller="MainInvoiceController">
<ul>
    <li data-ng-repeat="lineItem in lineItems">
        <line-item-display data-line-item="lineItem"></line-item-display>
    </li>
</ul>
</div>

invoiceTest.controller("MainInvoiceController", function($scope){

    // lineItem directive will update Quantity & Cost as user changes
    // changes input values, and recalculate TotalCost any time either
    // Quantity or Cost changes.
    $scope.lineItems = [
        {
            Description : "Item 1",
            Quantity: 2,
            Cost: 2.00,
            TotalCost: 4.00
        },
        {
            Description : "Item 2",
            Quantity: 10,
            Cost: 4.00,
            TotalCost: 40.00
        },
    ]
});

invoiceTest.service("InvoiceCalculationsService", function(){
    // Calculates the total cost of the line item, and
    // updates the TotalCost property of the line item
    this.updateTotalCost = function(lineItemData)
    {
        lineItemData.TotalCost = lineItemData.Quantity * lineItemData.Cost;
    }
});

InvoiceTest.directive("lineItemDisplay", function(InvoiceCalculationsService){
    return {
        restrict:"AE",
        scope:{
            // lineItemData is expected to contain the properties:
            // Description
            // Quantity
            // Cost
            // TotalCost
            lineItem:"="
        },
        controller: function($scope, $element, $attrs){
            this.recalculateTotal = function(){
                InvoiceCalculationsService.updateTotalCost($scope.lineItem);
            }
        },
        template:   'Description: <input data-ng-model="lineItem.Description" />'
                    'Quantity: <input data-ng-model="lineItem.Quantity" data-ng-change="recalculateTotal()" />' +
                    'Cost: <input data-ng-model="lineItem.Cost" data-ng-change="recalculateTotal()" />' + 
                    'Total: <span>{{lineItem.TotalCost}}</span>'
    }
});

<div data-ng-controller="MainInvoiceController">
<ul>
    <li data-ng-repeat="lineItem in lineItems">
        <line-item-display data-line-item="lineItem"></line-item-display>
    </li>
</ul>
</div>