雙向綁定在UI Modal中不起作用

Question

我試圖以模式顯示數據，但似乎無法雙向綁定。

在我的HTML中，

<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.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")

打開模態后，屬性會正確綁定並顯示，但是為$scope.btnText或$scope.data.cost分配其他值不會反映在模態模板上。 但是將$ scope記錄到控制台將顯示所做的更改。

我只是想知道我做錯了什么嗎？

Answer 1

嘗試將$ scope傳遞給Modal實例。 就像下面提到的：

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

默認情況下，傳遞給模式實例的作用域為$ rootScope，因此您必須使用$ scope覆蓋該作用域。