AngularJS 1.5.3 + ES6：Stripe卡片编辑表单渲染异常

Hey there, let's tackle this Stripe card edit form issue you're facing with AngularJS 1.5.3 and ES6! Since you mentioned create/delete flows work fine but the edit form won't render properly, let's break down the most common culprits and fixes based on your setup.

1. Fix Resolve Data Loading (Most Likely Root Cause) #

Your route's resolve block is cut off, but it looks like you're trying to fetch card data via CardResource. Let's ensure this step is solid:

• First, make sure you're correctly grabbing the card_id from $stateParams and passing it to your resource:

  .state('account.edit', {
    templateUrl: 'app/templates/accounts/edit-card.html',
    controller: 'AccountController',
    url: '/account/edit/{card_id}',
    controllerAs: 'account',
    resolve: {
      data: (CardResource, $stateParams) => {
        // Ensure your CardResource's get method accepts the card_id param
        return CardResource.get({ card_id: $stateParams.card_id }).$promise;
      }
    }
  })
  

• Verify CardResource is configured to hit the correct Stripe-backed API endpoint (e.g., /api/cards/:card_id)
• In your ES6 controller, properly receive and bind the resolved data to your view model:

  class AccountController {
    constructor(data) {
      // Bind fetched card data to the controller instance for the form
      this.card = data;
    }
  }
  // Explicitly declare dependencies for AngularJS 1.x injection
  AccountController.$inject = ['data'];
  

2. Check Form Binding in the Template #

Since you're using controllerAs: 'account', make sure your edit-card.html form fields are bound to the correct controller property:

<form name="editCardForm">
  <input type="text" ng-model="account.card.name" placeholder="Cardholder Name">
  <input type="text" ng-model="account.card.last4" disabled> <!-- Stripe's read-only last 4 digits -->
  <div>
    <input type="number" ng-model="account.card.exp_month" placeholder="MM" max="12" min="1">
    <input type="number" ng-model="account.card.exp_year" placeholder="YY">
  </div>
</form>

If Stripe returns data in a format that doesn't match your form (e.g., combined expiration date), add formatting logic in the controller to map the data correctly.

3. Verify Route Parameter Passing #

Double-check that you're passing the card_id correctly when navigating to the edit route:

<!-- Example link to trigger edit route -->
<a ui-sref="account.edit({ card_id: card.id })">Edit This Card</a>

You can debug the parameter in your controller to confirm it's being received:

constructor($stateParams, data) {
  console.log('Received card ID:', $stateParams.card_id);
  console.log('Fetched card data:', data);
  this.card = data;
}

4. Fix ES6 Controller Dependency Injection #

AngularJS 1.x requires explicit dependency handling for ES6 classes:

• Use the $inject static property as shown earlier, or enable the ngInject decorator (requires Babel support) for automatic injection:

  class AccountController {
    constructor(data, $stateParams) {
      'ngInject'; // Enables auto-injection
      this.card = data;
    }
  }
  

A missing or incorrect injection will prevent the controller from accessing the resolved data, leading to an empty form.

5. Validate Stripe API & Backend Response #

• Check your browser's network tab to confirm the card detail request returns a 200 status and valid data (including fields like name, last4, exp_month).
• Ensure your backend has proper Stripe API permissions to fetch card details, and that it's returning the full data your frontend needs.

内容的提问来源于stack exchange，提问作者Talha Junaid