angular.extend方法的具体使用
更新时间：2017年09月14日 09:39:53 作者：itsonglin
本篇文章主要介绍了angular.extend方法的具体使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
AngularJs的angular.extend()方法可以把一个或多个对象中的方法和属性扩展到一个目的对象中，使得这个对象拥有其他对象相同的方法和属性，如下图所示。
angular.extends()方法的第一个参数是要被扩展的对象，后面可以传入一个或多个对象。
如果想要保存一个对象的状态，除了可以调用angular.copy()方法外，还可以把一个空对象｛｝作为第一个对象传入。
但要注意的是，angular.extends()是非递归的，也就是说：如果扩展的属性中有对象，那么二者同时引用同一个对象！
下面这个例子证实了这个说法：
<!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()方法不是深复制的，$scope.human
和$scope.adult其实引用的是同一个对象-->
$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()">点击我！</button>
</div>
</body>
</html>
控制台的打印结果如下：
I can only cry!
I can earn money!
I hate you!
I hate you!
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家
您可能感兴趣的文章:
相关文章
我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。接下来通过本文给大家简单介绍angularjs中http服务的用法，喜欢的朋友可以参考下2016-02-02
这篇文章主要介绍了使用AngularJS来实现HTML页面嵌套的方法,主要用到了AngularJS中的ng-include指令,需要的朋友可以参考下2015-06-06
Angular angular-file-upload文件上传的示例代码
这篇文章主要介绍了Angular angular-file-upload文件上传的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了AngularJS动态绑定HTML的方法,结合实例形式分析了AngularJS实现动态绑定HTML的相关操作指令用法与使用注意事项,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了angular中的observable问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
列表批量选择是一个开发人员经常遇到的功能，列表批量选择的实现方式很多，这篇文章主要介绍了Angular多选、全选、批量选择实例代码，有兴趣的可以了解一下。2017-03-03
本文将介绍Angular子路由的用法，对此感兴趣的同学，可以参考下2021-05-05
本文主要介绍AngularJS 工作原理,这里整理了相关资料及示例代码，有兴趣的小伙伴可以参考下2016-08-08
angularjs select 赋值 ng-options配置方法
下面小编就为大家分享一篇angularjs select 赋值 ng-options配置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了AngularJS实现单一页面内设置跳转路由的方法,结合实例形式分析了AngularJS路由操作相关设置与使用技巧,需要的朋友可以参考下2017-06-06
最新评论