眾所周知AngularJS的雙向綁定在表單應(yīng)用中強(qiáng)大又方便，但是偶爾會(huì)遇到需要解除對象變量的雙向綁定。Angular提供的angular.copy的方法可以實(shí)現(xiàn)解除雙向綁定。所以這篇文章就來給大家詳細(xì)的介紹下angular.copy，有需要的朋友們可以參考借鑒，下面來一起看看吧。

首先我們來看看示例代碼

<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('app', [])
 .controller('CopyController', function ($scope) {
 // body...
 $scope.changeData1 = function () {
  // body...
  scope.user1=scope.user1=
scope.user;
  $scope.user1.data = 'is changed';
 }
 $scope.copy = function () {
  // body...
  scope.copyUser=angular.copy(scope.copyUser=angular.copy(
scope.user);
 }
 });
</script>

從上面的演示可以看到，當(dāng)點(diǎn)擊copy按鈕時(shí)，copyData的值就變成了”this is old data”，成功將user的值復(fù)制到copyUser.

當(dāng)點(diǎn)擊change按鈕后，user1和user的值都變成了'is changed'，而copyUser的值卻沒有發(fā)生改變。這時(shí)候在input輸入框改變值，user和user1的值都會(huì)跟著改變，說明了這二者實(shí)際上是同一個(gè)變量引用。而copyUser沒有發(fā)生變化。

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

這跟JavaScript中對象是引用類型有關(guān)。

JavaScript中的值類型

在JavaScript中，值分為原始值和引用值兩種類型。

原始值：存儲(chǔ)在棧（Stack）中的簡單數(shù)據(jù)字段，也就是說，它們的值是直接存儲(chǔ)在變量訪問的位置；

引用值：存儲(chǔ)在堆（heap）中，也就是說，存儲(chǔ)在變量處的值是一個(gè)指針，指向存儲(chǔ)對象的內(nèi)存處。

如下圖所示：