成人性生交大片免费看小说,成av免费大片黄在线观看

首頁

php教程

PHP開發(fā)

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

高洛峰

Dec 05, 2016 am 11:40 AM

首先我們來看看範(fàn)例程式碼

<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>

? ?

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

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

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

這跟JavaScript中物件是引用型別有關(guān)。

JavaScript中的值類型

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

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

???? 引用值：儲(chǔ)存在堆疊（heap）中，也就是說，儲(chǔ)存在變數(shù)處的值是一個(gè)指針，指向儲(chǔ)存物件的記憶體。

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

所以在上述的程式碼中:

物件$scope.user和$scope.user1的值都是指向了同一個(gè)引用。對(duì)Angular來說，監(jiān)聽變數(shù)變化是在監(jiān)聽其物件所引用的位址，所以當(dāng)物件的引用值發(fā)生了變化，所有指向它的物件都會(huì)跟著改變。

所以在Angular中，直接通過物件的賦值是無法解除雙向綁定的。所以要解除雙向綁定的辦法就是新建立個(gè)對(duì)象，然後將原有的對(duì)象的值賦值給新對(duì)象。這不就是JavaScript中的深拷貝嘛。

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

本網(wǎng)站聲明

本文內(nèi)容由網(wǎng)友自願(yuàn)投稿，版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容，請(qǐng)聯(lián)絡(luò)admin@php.cn