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-methods。

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

Angular有这样的惯例，即在代码中使用html和camelCase中的破折号。

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

scope: {
     paymentMethods: '='
}

不重复。

Answer 2

在您的指令中，您将范围定义为包含名为paymentMethods的单个属性。但是在您的模板中，您只需参考payment。请注意，当在指令定义上定义scope属性时，指令的内部作用域无法访问它所使用的外部作用域。

在Angularjs模板中重复ng-repeat

2 个答案: