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

首先我們來(lái)看看示例代碼

<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的值卻沒(méi)有發(fā)生改變。這時(shí)候在input輸入框改變值，user和user1的值都會(huì)跟著改變，說(shuō)明了這二者實(shí)際上是同一個(gè)變量引用。而copyUser沒(méi)有發(fā)生變化。

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

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

JavaScript中的值類型

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

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

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

如下圖所示：

在JavaScript中的對(duì)象便是引用值，也就是說(shuō)對(duì)象是通過(guò)引用傳遞值的。

所以在上述的代碼中:

對(duì)象$scope.user和$scope.user1的值都是指向了同一個(gè)引用。對(duì)于Angular來(lái)說(shuō)，監(jiān)聽變量變化是在監(jiān)聽其對(duì)象所引用的地址，所以當(dāng)對(duì)象的引用值發(fā)生了變化，所有指向它的對(duì)象都會(huì)跟著發(fā)生變化。

所以在Angular中，直接通過(guò)對(duì)象的賦值是無(wú)法解除雙向綁定的。所以要想解除雙向綁定的辦法就是新創(chuàng)建個(gè)對(duì)象，然后將原有的對(duì)象的值賦值給新對(duì)象。這不就是JavaScript中的深拷貝嘛。

對(duì)的，angular.copy就是Angular提供的 deep copy 的方法。所以通過(guò)angular.copy復(fù)制出來(lái)的對(duì)象，既能和原有的對(duì)象值保持一致，又不與舊對(duì)象指向同一個(gè)引用，從而實(shí)現(xiàn)了解除對(duì)象變量的雙向綁定。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家學(xué)習(xí)或者使用Angular.js能有所幫助，如果有疑問(wèn)大家可以留言交流。

您可能感興趣的文章: