模板Angularjs中的ng-repeat

Question

I have a payment directive as below. A payment can have one of a number of different payment methods. There is a select list in side the template which should be from a list of payment methods that are passed in.

But at the moment the select list is not being populated with anything.

I'm pretty new to angular.

Payment Directive

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

    }
 };
});

Payment Template

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

Calling Page

<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

The attribute name is specified in the wrong way in the calling page, it should be payment-methods.

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

Angular has this convention of using dashes in html and camelCase in the code.

Moreover, since you are using a key named as the attribute in the isolated scope of the directive, you can also specify it as:

scope: {
     paymentMethods: '='
}

without repeating it.

Answer 2

In your Directive, you define the scope as containing a single property called paymentMethods . Yet in your template, you just refer to payment . Note that the inner scope of a directive cannot access the outer scope that it is used in when you define the scope attribute on the directive definition.