利用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)點擊copy按鈕時，copyData的值就變成了”this is old data”，成功將user的值復(fù)制到copyUser.
當(dāng)點擊change按鈕后，user1和user的值都變成了'is changed'，而copyUser的值卻沒有發(fā)生改變。這時候在input輸入框改變值，user和user1的值都會跟著改變，說明了這二者實際上是同一個變量引用。而copyUser沒有發(fā)生變化。
angular.copy 能取消雙向綁定的原理
這跟JavaScript中對象是引用類型有關(guān)。
JavaScript中的值類型
在JavaScript中，值分為原始值和引用值兩種類型。
原始值：存儲在棧（Stack）中的簡單數(shù)據(jù)字段，也就是說，它們的值是直接存儲在變量訪問的位置；
引用值：存儲在堆（heap）中，也就是說，存儲在變量處的值是一個指針，指向存儲對象的內(nèi)存處。
如下圖所示：
在JavaScript中的對象便是引用值，也就是說對象是通過引用傳遞值的。
所以在上述的代碼中:
對象$scope.user和$scope.user1的值都是指向了同一個引用。對于Angular來說，監(jiān)聽變量變化是在監(jiān)聽其對象所引用的地址，所以當(dāng)對象的引用值發(fā)生了變化，所有指向它的對象都會跟著發(fā)生變化。
所以在Angular中，直接通過對象的賦值是無法解除雙向綁定的。所以要想解除雙向綁定的辦法就是新創(chuàng)建個對象，然后將原有的對象的值賦值給新對象。這不就是JavaScript中的深拷貝嘛。
對的，angular.copy就是Angular提供的 deep copy 的方法。所以通過angular.copy復(fù)制出來的對象，既能和原有的對象值保持一致，又不與舊對象指向同一個引用，從而實現(xiàn)了解除對象變量的雙向綁定。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家學(xué)習(xí)或者使用Angular.js能有所幫助，如果有疑問大家可以留言交流。
- 理解Angular數(shù)據(jù)雙向綁定
- 淺談angular.js中實現(xiàn)雙向綁定的方法$watch $digest $apply
- 自定義Angular指令與jQuery實現(xiàn)的Bootstrap風(fēng)格數(shù)據(jù)雙向綁定的單選與多選下拉框
- 深入學(xué)習(xí)AngularJS中數(shù)據(jù)的雙向綁定機制
- 實例剖析AngularJS框架中數(shù)據(jù)的雙向綁定運用
- Angular和Vue雙向數(shù)據(jù)綁定的實現(xiàn)原理(重點是vue的雙向綁定)
- AngularJS入門教程之雙向綁定詳解
- 深入理解Angularjs向指令傳遞數(shù)據(jù)雙向綁定機制
- div實現(xiàn)自適應(yīng)高度的textarea實現(xiàn)angular雙向綁定
- angular+bootstrap的雙向數(shù)據(jù)綁定實例
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Angular CLI發(fā)布路徑的配置項的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
系統(tǒng)的學(xué)習(xí)了一下angularjs，發(fā)現(xiàn)angularjs的有些思想根php的模塊smarty很像，例如數(shù)據(jù)綁定，filter。如果對smarty比較熟悉的話，學(xué)習(xí)angularjs會比較容易一點,這篇文章給大家介紹angularjs filter用法詳解，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
AngularJS的ng Http Request與response格式轉(zhuǎn)換方法
這篇文章主要介紹了AngularJS的ng Http Request與response格式轉(zhuǎn)換方法,結(jié)合實例形式分析了AngularJS實現(xiàn)Request與response格式轉(zhuǎn)換操作的相關(guān)設(shè)置與使用技巧,需要的朋友可以參考下2016-11-11
AngularJS實現(xiàn)的獲取焦點及失去焦點時的表單驗證功能示例
這篇文章主要介紹了AngularJS實現(xiàn)的獲取焦點及失去焦點時的表單驗證功能,涉及AngularJS使用ng-blur、ng-focus針對表單事件監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
本文主要介紹了Angular動態(tài)組件，對此感興趣的同學(xué)，可以親自實驗一下。2021-05-05
Angular.js中angular-ui-router的簡單實踐
本篇文章主要介紹了Angular.js中angular-ui-router的簡單實踐，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
Angular2.0實現(xiàn)modal對話框的方法示例
這篇文章主要介紹了Angular2.0實現(xiàn)modal對話框的方法,結(jié)合實例形式分析了angular2.0實現(xiàn)modal對話框的樣式、界面及功能等相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
AngularJS $http模塊POST請求實現(xiàn)
本篇文章主要介紹了AngularJS $http模塊POST請求實現(xiàn)，這里整理了詳細的代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了AngularJS表格樣式簡單設(shè)置方法,結(jié)合實例形式分析了AngularJS結(jié)合bootstrap針對表格樣式的相關(guān)設(shè)置技巧,需要的朋友可以參考下2017-03-03
angularJs在多個控制器中共享服務(wù)數(shù)據(jù)的方法
今天小編就為大家分享一篇angularJs在多個控制器中共享服務(wù)數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09