详解angular中的作用域及继承
在一些使用angular框架的大型项目中，似乎有很多个controller，而每个controller都有自己的$scope.
1、$rootscope
$rootScope顶级作用域，也叫根作用域，类似于window，window的属性在任何子作用域都可以访问。$rootScope则是所有controller进行数据沟通的中间域，即在$rootScope中的数据，在每个controller中都能通过$rootScope.xxx获取到。
2、$scope
(1)作用
$scope 就在视图和控制器之间建立了一个桥梁,基于作用域视图在修改数据时会立刻更新 $scope,同样的 $scope 发生改变时也会立刻重新渲染视图.每个控制器controller对应一个$scope，通过为其属性赋值,可以传递数据给模板渲染.
(2)生命周期
创建：在创建控制器或指令时，AngularJS会用$injector创建一个新的作用域，并在这个新建的控制器或指令运行时将作用域传递进去。
链接：当Angular开始运行时，所有的$scope对象都会附加或者链接到视图中。所有创建$scope对象的函数也会将自身附加到视图中。这些作用域将会注册当Angular应用上下文中发生变化时需要运行的函数。这些函数被称为$watch函数，Angular通过这些函数获知何时启动事件循环。
更新：当事件循环运行时，它通常执行在顶层$scope对象上（被称作$rootScope），每个子作用域都执行自己的脏值检测。每个监控函数都会检查变化。如果检测到任意变化，$scope对象就会触发指定的回调函数。
销毁：当一个$scope在视图中不再需要时，这个作用域将会清理和销毁自己。尽管永远不会需要清理作用域（因为Angular会为你处理），但是知道是谁创建了这个作用域还是有用的，因为你可以使用这个$scope上叫做$destory()的方法来清理这个作用域。
3、原型继承
scope是AngularJS中的作用域(其实就是存储数据的地方)，很类似JavaScript的原型链 。搜索的时候，优先找自己的scope，如果没有找到就沿着作用域链向上搜索，直至到达根作用域rootScope。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body ng-app="myApp">
<div ng-controller="parentController">
{{name}}
<div ng-controller="sonController">
{{name}}
</div>
</body>
<script type="text/javascript" src="./angular.min.js"></script>
<script>
var parentController=function($scope){
$scope.name="parent";
}
var sonController=function($scope){
console.log($scope.name);//parent
}
parentController.$injector=["$scope"];
sonController.$injector=["$scope"];
angular.module("myApp",[])
.controller("parentController",parentController)
.controller("sonController",sonController)
</script>
</html>
首先子控制器在自己的作用域内查找name属性，没找到，向父控制器找。
补充一点，如何在子控制器中修改父控制器中$scope的值，可见如下：
$scope.$parent.name="son";在子控制器中$scope.$parent就表示父控制器中的$scope,然后修改其值即可。
4、$new
$scope.$new(isolated，parent);用于定义scope的child scope
1）参数：isolated，是否是隔离的。如果值是true，那么这个scope不会从父scope继承原型。作用域是独立的，在这里不能看见父scope的属性。如果值为false，则继承自父（可以访问父scope的所有成员），默认为false!
parent 用于指定创建的子scope的父scope，如果没有此参数，则父scope为调用当前$new方法的$scope
var myController=function($scope){
$scope.data="hello!"
var scope1=$scope.$new(false,$scope);
console.log(scope1.data); //hello! scope1继承了$scope,所以可以访问到data
var scope2=$scope.$new(true,$scope);
console.log(scope2.data);// undefined 第一个参数为true，表示是隔离的，无法继承，自己又没有，故为undefined
}
myController.$injector=["$scope"];
angular.module("myApp",[])
.controller("myController",myController)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法，非常具有实用价值，需要的朋友可以参考下2017-07-07
表单验证是经常用到一个东西，这篇文章主要介绍了angular 表单验证器验证的同时限制输入的实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-04-04
本篇文章主要介绍了angular+webpack2实战例子，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了angular.fromJson与toJson方法用法,结合实例形式分析了AngularJS使用fromJson与toJson方法进行json格式数据的解析与转换相关操作技巧,需要的朋友可以参考下2017-05-05
本篇文章主要介绍了Angular客户端请求Rest服务跨域问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
这篇文章主要为大家详细介绍了Angular页面间切换及传值的四种方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要为大家详细介绍了AngularJS依赖注入模拟实现，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要介绍了Angular4实现鼠标悬停3d倾斜效果，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-10-10
Angular应用程序在首次加载根组件时会在浏览器的显示一个loading...动画，下面这篇文章主要给大家介绍了关于Angular4如何自定义首屏加载动画的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起看看吧。2017-07-07
这篇文章主要介绍了简述Angular 5 快速入门，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
最新评论