angular.extend方法的具體使用
AngularJs的angular.extend()方法可以把一個或多個對象中的方法和屬性擴(kuò)展到一個目的對象中,使得這個對象擁有其他對象相同的方法和屬性,如下圖所示。
angular.extends()方法的第一個參數(shù)是要被擴(kuò)展的對象,后面可以傳入一個或多個對象。
如果想要保存一個對象的狀態(tài),除了可以調(diào)用angular.copy()方法外,還可以把一個空對象{}作為第一個對象傳入。
但要注意的是,angular.extends()是非遞歸的,也就是說:如果擴(kuò)展的屬性中有對象,那么二者同時引用同一個對象!
下面這個例子證實(shí)了這個說法:
<!DOCTYPE html> <html ng-app="extendApp"> <head> <meta charset="UTF-8"> <title></title> <script src="../js/angular.js"></script> <script type="text/javascript"> angular.module("extendApp", []) .controller("extendController", function($scope) { $scope.baby = { cry : function() { console.log("I can only cry!"); } } $scope.adult = { earn : function() { console.log("I can earn money!"); }, lover: { love:function() { console.log("I love you!"); } } } $scope.human = {} $scope.hehe = "hehe "; $scope.extend = function() { angular.extend($scope.human, $scope.baby, $scope.adult); $scope.human.cry(); $scope.human.earn(); <!-- 注意,這里修改了lover對象的love()方法,由于extends()方法不是深復(fù)制的,$scope.human 和$scope.adult其實(shí)引用的是同一個對象--> $scope.human.lover.love = function() { console.log("I hate you!"); } <!-- 這兩行都會輸出“I hate you !",可憐的adult對象, 他把自己的lover分享給了human! --> $scope.human.lover.love(); $scope.adult.lover.love(); } }); </script> </head> <body> <div ng-controller="extendController"> <button ng-click="extend()">點(diǎn)擊我!</button> </div> </body> </html>
控制臺的打印結(jié)果如下:
I can only cry!
I can earn money!
I hate you!
I hate you!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家
相關(guān)文章
舉例簡介AngularJS的內(nèi)部語言環(huán)境
這篇文章主要介紹了AngularJS的內(nèi)部語言環(huán)境,展示不同語言環(huán)境下對貨幣或是日期等文本方面所產(chǎn)生的影響,需要的朋友可以參考下2015-06-06Angular2學(xué)習(xí)教程之組件中的DOM操作詳解
這篇文章主要給大家介紹了Angular2學(xué)習(xí)教程之組件中DOM操作的相關(guān)資料,文中介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面跟著小編一起來看看吧。2017-05-05Angular使用$http.jsonp發(fā)送跨站請求的方法
這篇文章主要介紹了Angular使用$http.jsonp發(fā)送跨站請求的方法,結(jié)合實(shí)例形式分析了$http.jsonp發(fā)送跨站請求遇到的問題與相應(yīng)的解決方法,具有一定參考借鑒價值,需要的朋友可以參考下2017-03-03angularjs實(shí)現(xiàn)多張圖片上傳并預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)多張圖片上傳并預(yù)覽功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02AngularJS使用angular-formly進(jìn)行表單驗(yàn)證
這篇文章主要介紹了AngularJS使用angular-formly進(jìn)行表單驗(yàn)證的相關(guān)資料,需要的朋友可以參考下2015-12-12全面解析Angular中$Apply()及$Digest()的區(qū)別
$apply()和$digest()在AngularJS中是兩個核心概念,但是有時候它們又讓人困惑。這篇文章主要介紹了Angular中$Apply()及$Digest()區(qū)別詳細(xì)說明的相關(guān)資料,需要的朋友可以參考下2016-08-08Angularjs 1.3 中的$parse實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了angularjs $parse的相關(guān)知識,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-09-09