2

2 つの変数が同じ変数を参照する場合、次のようにバインドされないことがあります。

  var option = 1;
  $scope.a = option;
  $scope.b = option;

$scope.a を変更しても、$scope.b は変更されません。このプランカーを見る

ただし、時々それらは一緒にバインドされています。たとえば、次のようなモーダルで私に起こります:

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function($scope, $modal, $log) {

  $scope.testDataArray = [{
    "name": "Doe"
  }, {
    "name": "Deer"
  }, {
    "name": "Female"
  }];


  $scope.open = function(testData) {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
        data: function() {
          return testData;
        }
      }
    });

    modalInstance.result.then(function(selectedItem) {
      $scope.scopeData = selectedItem;
    }, function() {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
};

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

var ModalInstanceCtrl = function($scope, $modalInstance, data) {
  $scope.modalData1 = data;
  $scope.modalData2 = data;

  $scope.ok = function() {
    $modalInstance.close($scope.modalData);
  };

  $scope.cancel = function() {
    $modalInstance.dismiss('cancel');
  };
};

プランカーを参照してください。ここで、「modalData1」と「modalData2」はどちらも「データ」を参照しています。この Plunker の任意のモーダルで、modalData1 を変更すると、modalData2 が変更されます。

どうしてこうなの？？

ありがとうございました！

4

3 に答える 3

4

更新:
javascript は参照渡しであるため、この変数 (参照) の両方が実際には同じオブジェクトを指しているため、要素をコピーする必要があります。その副作用を取り除きたい場合は、割り当てる前にオブジェクトをコピーする必要があります:

$scope.modalData1 = angular.copy(data);
$scope.modalData2 = angular.copy(data);

プランカー

元の答え:

あなたが提供した例では、 modalData2 入力は modalData1 で変更されています。これは、同じモデルが ng-model 属性に割り当てられているためです。

<div class="modal-body">
    modalData1:
    <input ng-model="modalData1" />
    <br>
    modalData2:
    <input ng-model="modalData1" />
</div>

私がそれを修正すると、それらは独立しています（plunker）：

<div class="modal-body">
    modalData1:
    <input ng-model="modalData1" />
    <br>
    modalData2:
    <input ng-model="modalData2" />
</div>

次に modalData1 入力を更新しても、もう一方は変更されません。

于 2015-07-21T19:58:39.170 に答える
0

これは、angularjs が提供するディレクティブである ng-model を使用するときにここで行われている双方向バインディングをサポートしているためであり、両方の入力フィールドを同じ ng-model 値でバインドしているため、一方が他方に反映されます。

于 2015-07-21T20:07:23.390 に答える