Chrome 和 Firefox 中的模型绑定不同

Question

我遇到了奇怪的情况，同样的代码在 chrome 和 firefox 中没有按预期工作。

这是 html 代码：

<div class="modal" id="FeeModal" role="dialog" aria-hidden="true" data-backdrop="static">
   <div class="modal-dialog">
      <div class="modal-body">
        <label>Fee Paid<label>
        <input id="FeePaid" ng-model="feeModel.FeePaid" />
      </div>
      <div class="modal-footer">
         <button ng-click="feeModelUpdate()">Apply</button>
      </div>
   </div>
</div>

这是控制器中的代码：

//this is the method I call to open modal
$scope.addFee = function(section, index, isRecordingFee) {
    var data = { 
        section = section,
        index = index,
        isRecordingFee = isRecordingFee
    }

    $scope.feeModel = data;

    $(".popover").hide();
    $("#FeeModal").modal("show");
}

$scope.feeModelUpdate = function() {

    // in this method I have problem
    $scope.feeModel.FeePaid

}

在我的方法 feeModelUpdate 中，我想从 FeePaid 访问值，但我在不同的浏览器上遇到问题。

在 chrome 上，此代码有效，我的 FeePaid 中有值，但这在 Firefox 上无效。

所以我认为这是不同浏览器中范围界定的某种问题？

如果我将 html 代码更改为：

ng-model="$parent.feeModel.FeePaid"

然后突然间这在 Firefox 中可以工作，但在 Chrome 中却不工作。所以我需要帮助来找到解决这个问题的方法。我不确定哪里出了问题，但奇怪的是这段代码在一个浏览器中有效而在其他浏览器中无效，反之亦然。

Answer 1

我通过更改控制器代码解决了这个问题。我已经在控制器启动时初始化了 feeModel：

$scope.feeModel = {};

...

$scope.addFee = function(section, index, isRecordingFee) {

...

它解决了问题，但我不确定为什么这会解决问题。如果有人有一些解释，如果他能 post 就太好了。

Chrome 和 Firefox 中的模型绑定不同

Model binding not same in Chrome and Firefox

html

firefox

google-chrome

angularjs

angularjs-ng-model