双方向バインディングがUIで機能しないModal

Question

モーダルでデータを表示しようとしていますが、双方向バインディングが動作しないようです。私のHTMLで

私は、コントローラ

$scope.openPriceEstimateModal = function() { 
     var modalInstance = $uibModal.open({ 
      animation: true, 
      templateUrl: '/app/tpls/partials/estimate.modal.html', 
      windowClass: 'price-estimate-modal', 
      controller: 'EstimateModalCtrl' 
     }); 
    }; 

モーダル

controller('EstimateModalCtrl', function($scope, $timeout, $uibModalInstance) { 
    $scope.btnText = "Estimate" 
    $scope.data = { 
    pickup_address: null, 
    delivery_address: null, 
    cost: 0 
    }; 

    $scope.address = {} 
}); 

モーダルテンプレート（それはヒスイにあります）

.modal-header 
.modal-body 
    .estimate-price-display 
    h1 
     span.currency ₦ 
     span.value(ng-bind="data.cost") 

    .estimate-form 
    form(name="form" no-validate) 
     .control-group 
     label Pickup Address 
     input.form-control(pac type="text" name="pickup" placeholder="Enter pickup address" ng-model="data.pickup_address" ng-required="true" details="address.pickup") 

     .control-group 
     label Delivery Address 
     input.form-control(pac type="text" name="delivery" placeholder="Enter delivery address" ng-model="data.delivery_address" ng-required="data.pickup_address" details="address.delivery") 

     .control-group(style="text-align: center;") 
     .button.btn.btn-lg.btn-clr-white(type="button" ng-click="getEstimate()" ng-disabled="form.$invalid" ng-bind="btnText") 

ためのコントローラで

<div class="cta-actions"> 
    <div class="action"><a class="btn btn-lg btn-max">Send a package</a></div> 
    <div class="action"><a id="estimate-modal-trigger" ng-click="openPriceEstimateModal()" class="btn btn-lg">Get an estimate</a></div> 
</div> 

を持っていますモーダルプロパティが適切に結合されて表示される、しかし$scope.btnTextまたは$scope.data.costに異なる値を割り当てることモーダルテンプレートに反映していない開放され

。しかし、コンソールに$スコープを記録すると、変更が行われたことが示されます。

私は何か間違っていると思っていますか？

Answer 1

$ scopeをModalインスタンスに渡すようにしてください。ように下記：

$ scope.openPriceEstimateModal =関数（）{ VAR modalInstance = $ uibModal.open（{ アニメーション：真、 範囲：$スコープ、 templateUrl：「/アプリ/ TPLS /パーシャル/見積り.modal.html」 windowClass： '価格見積もりモーダル' コントローラ 'EstimateModalCtrl' }）。 };あなたは$スコープでそれをオーバーライドする必要がありますので

デフォルトでモーダルインスタンスに渡された範囲は、$ rootScopeになります。