AngularJSでビューからコントローラにデータをバインドする

Question

こんにちは私は角度のあるアプリケーションを構築していて、ストライプフォーム内に問題があります。基本的には、カード番号、有効期限、CVCコードなどのデータをビューからコントローラのストライプコールバックに送信しますが、支払う金額も追加したいと思います。だから私は自分のフォームにこれを追加しました：私は、この変数を持つコントローラで

<form stripe-form="handleStripe" name="myForm"> 
    <!-- input added for the price --> 
    <div class="row" ng-if="!unregistered_user"> 
     <div class="input-field col col-xs-12"> 
      <label for="name">Amount </label> 
      <input name='price' type="number" id="amount" ng-model="price"> 
     </div> 
    </div> 
<!-- credit/debit card form --> 
    <div class="row"> 
     <div class="input-field col col-xs-12"> 
      <label for="cardn">Card number</label> 
      <input type="text" name="number" id="cardn" ng-model="number" payments-validate="card" payments-format="card" payments-type-model="type" ng-class="myForm.number.$card.type"/> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="input-field col-xs-6"> 
      <label for="exp">Expiry</label> 
      <input type="text" id="exp" ng-model="expiry" payments-validate="expiry" payments-format="expiry" /> 
     </div> 
     <div class="input-field col-xs-6"> 
      <label for="cvc">CVC</label> 
      <input type="text" id="cvc" ng-model="cvc" payments-validate="cvc" payments-format="cvc" payments-type-model="type"/> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="input-field col-xs-12"> 
      <button type="submit" class="btn btn-primary btn-large">Pay {{ price }}</button> 
     </div> 
    </div> 
</form> 

を：

▸   $scope.price = 0; 

私は最初、私は価格の入力がIまったく同じ量を持っていることを見ることができるページをロードすると変数$ scope.priceを入れてください。しかし、私がページ内でそれを変更してフォームを送信すると、$ scope.priceは常に0になります。 データがコントローラからビューに渡されるのと同じですが、ビューからコントローラに戻る方法はありません。

どうすればこの問題を解決できますか？

Answer 1

あなたの問題は、入力モデルを価格モデルで囲むようにng-ifを使用していると思います。 ng-ifは独自のスコープを作成し、あなたのケースでは、ng-if内のスコープと接続します。 代わりにng-showを使用するか、ng-model = "$ parent.price"のようにモデルを設定するか、controllerAs構文を使用して、この問題についてもう心配する必要はありません。