利用angular.copy取消變數的雙向綁定與解析-PHP开发-PHP中文網

利用angular.copy取消變數的雙向綁定與解析

高洛峰

發布： 2016-12-05 11:40:03

原創

1447 人瀏覽過

首先我們來看看範例程式碼

<body ng-app="app">
 <div ng-controller="CopyController">
 <div>
 data: <input ng-model="user.data" /><br>
 user.data: {{user.data}} <br>
 user1.data: {{user1.data}} <br>
 <button ng-click="changeData1()">change</button> <br>
 <button ng-click="copy()">copy</button> <br>
 copyData: {{copyUser.data}}
 </div>
 </div>
 <script src="node_modules/angular/angular.min.js"></script>
</body>
<script>
 angular.module(&#39;app&#39;, [])
 .controller(&#39;CopyController&#39;, function ($scope) {
 // body...
 $scope.changeData1 = function () {
  // body...
  scope.user1=scope.user1=
scope.user;
  $scope.user1.data = &#39;is changed&#39;;
 }
 $scope.copy = function () {
  // body...
  scope.copyUser=angular.copy(scope.copyUser=angular.copy(
scope.user);
 }
 });
</script>

登入後複製

從上面的示範可以看到，當點擊copy按鈕時，copyData的值就變成了”this is old data”，成功將user的值複製到copyUser.

當點擊change按鈕後，user1和user的值都變成了'is changed'，而copyUser的值卻沒有改變。這時候在input輸入框改變值，user和user1的值都會跟著改變，說明了這二者其實是同一個變數引用。而copyUser沒有發生變化。

angular.copy 能取消雙向綁定的原理

這跟JavaScript中物件是引用型別有關。

JavaScript中的值類型

在JavaScript中，值分為原始值和參考值兩種類型。

原始值：儲存在堆疊（Stack）中的簡單資料字段，也就是說，它們的值是直接儲存在變數存取的位置；

引用值：儲存在堆疊（heap）中，也就是說，儲存在變數處的值是一個指針，指向儲存物件的記憶體。

在JavaScript中的物件就是引用值，也就是說物件是透過引用傳遞值的。

所以在上述的程式碼中:

物件$scope.user和$scope.user1的值都是指向了同一個引用。對Angular來說，監聽變數變化是在監聽其物件所引用的位址，所以當物件的引用值發生了變化，所有指向它的物件都會跟著改變。