俺也去俺也去电影网,成人a级毛片免费观看,国产av午夜精品一区二区三

Maison

php教程

PHP開發(fā)

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

高洛峰

Dec 05, 2016 am 11:40 AM

首先我們來看看示例代碼

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

? ?

從上面的演示可以看到，當(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中對(duì)象是引用類型有關(guān)。

JavaScript中的值類型

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

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

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

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

所以在上述的代碼中:

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

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

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

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefa?on, veuillez contacter admin@php.cn