模板Angularjs中的ng-repeat

Question

我有如下付款指令。 付款可以具有多种不同的付款方式之一。 模板旁边有一个选择列表，该列表应该来自传入的付款方式列表。

但是目前，选择列表中没有任何内容。

我对棱角还很陌生。

付款指令

angular.module('filanthropyApp.directives', [])
.directive('payment', function () {
return {
    restrict: 'EA',      
    templateUrl: '/Content/filanthropyApp/Directives/Templates/payment.html',
    replace: true,
    scope: {
        paymentMethods: '=paymentMethods'

    }
 };
});

付款模板

<div>
<div class="col-md-8 input-group">
    <label class="control-label col-md-4">Payment Amount</label>
    <input type="text" class="form-control" value="{{payment.Amount}}" ng-model="payment.Amount" />
</div>

<div class="col-md-8 input-group">
    <label class="control-label col-md-4">Payment Method</label>
    <select ng-model="payment.PaymentMethodId" name="paymentMethods" ng-options="paymentMethod.Id as paymentMethod.Name for paymentMethod in paymentMethods">
        <option value="">Select a Payment Method</option>
    </select>
</div>

呼叫页面

<section id="payments">

            <div class="form-group payment" ng-repeat="payment in pledgeData.Payments">

                <payment paymentMethods="pledgeData.PaymentMethods" />

            </div>

            <button class="btn btn-default" ng-click="addPayment()">Add New Payment</button>

        </section>

Answer 1

在调用页面中以错误的方式指定了属性名称，它应该是付款方式。

<payment payment-methods='pledgeData.PaymentMethods'...

Angular具有在HTML中使用破折号和在代码中使用camelCase的约定。

此外，由于在指令的隔离范围内使用的键名为属性，因此也可以将其指定为：

scope: {
     paymentMethods: '='
}

无需重复。

Answer 2

在您的指令中，您将范围定义为包含一个名为paymentMethods的单个属性。 但是，在模板中，您仅指payment 。 请注意，指令的内部作用域不能访问在指令定义上定义scope属性时使用的外部作用域。