详细谈谈AngularJS的子级作用域问题
前言
AngularJS自带指令目前有ng-include、ng-view、ng-switch、ng-repeat。这样的原因是因为，这些指令虽然是AngularJS内部定义的，但是也是和directive实现的方法都是一样的，其内部使用的是scope:true的方式，子作用域继承了父级的作用，并且构建了一个独立的子作用域，所有双向绑定实现不了，只能单独实现子级作用域继承父级的属性。
AngularJS的继承是通过javascript的原型继承方式实现的，进行原型继承即意味着父作用域在子作用域的原型链上。因为原型链的检索只会在属性检索的时候触发，不会在改变属性值的时候触发。所以我们需要把原始类型转换成对象，把值绑定在对象的属性上。
大家可以在示例上看到，经过改造之后，就可以实现子级修改父级作用域的属性。原始类型只能继承父类的作用域。
实现方法目前看有三种，下面一次来介绍
通过给父级scope上添加{}来实现，把原始类型转换成对象。
代码如下：
<!DOCTYPE html>
<html lang="en" ng-app="childScope">
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.min.js" type="text/javascript"></script>
<style>
.inputOne{
width: 100px;
height: 50px;
background: skyblue;
}
.inner{
border: 1px solid skyblue;
width: 200px;
height: 150px;
}
.outer{
border: 1px solid salmon;
width: 200px;
height: 150px;
}
.sco{
background: skyblue;
}
</style>
</head>
<body ng-controller="childCon">
<div class="inner">
<h3>父级作用域</h3>
<span>{{vm.private1}}</span>
<span>{{vm.private2}}</span>
</div>
<div class="outer">
<h3>自己作用域</h3>
<div class="one" ng-include src="'one.html'"></div>
<div class="two" ng-include src="'two.html'"></div>
</div>
</body>
<script>
var app=angular.module("childScope",['template'])
.controller("childCon",["$scope", function ($scope) {
var vm=$scope.vm={};
vm.private1=12;
vm.private2=13;
$scope.test=123;
}]);
var template=angular.module("template",[])
.run(["$templateCache", function ($templateCache) {
$templateCache.put("one.html","" +
"<div><input type='text' ng-model='vm.private1'/></div>")
}])
.run(["$templateCache", function ($templateCache) {
$templateCache.put("two.html","" +
"<div><input type='text' ng-model='vm.private2'/>" +
"<div class='sco'><span>原始类型</span>{{test}}</div>" +
"</div>")
}])
</script>
</html>
通过controller as语法来实现
controller as其实相当于controller的示例对象，原理还是把原始类型转换成对象类型。
<!DOCTYPE html>
<html lang="en" ng-app="childScope">
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.min.js" type="text/javascript"></script>
<style>
.inputOne{
width: 100px;
height: 50px;
background: skyblue;
}
.inner{
border: 1px solid skyblue;
width: 200px;
height: 150px;
}
.outer{
border: 1px solid salmon;
width: 200px;
height: 150px;
}
.sco{
background: skyblue;
}
</style>
</head>
<body ng-controller="childCon as vm">
<div class="inner">
<h3>父级作用域</h3>
<span>{{vm.private1}}</span>
<span>{{vm.private2}}</span>
</div>
<div class="outer">
<h3>自己作用域</h3>
<div class="one" ng-include src="'one.html'"></div>
<div class="two" ng-include src="'two.html'"></div>
</div>
</body>
<script>
var app=angular.module("childScope",['template'])
.controller("childCon",["$scope", function ($scope) {
this.private1=12;
this.private2=22;
$scope.test=123;
}]);
var template=angular.module("template",[])
.run(["$templateCache", function ($templateCache) {
$templateCache.put("one.html","" +
"<div><input type='text' ng-model='vm.private1'/></div>")
}])
.run(["$templateCache", function ($templateCache) {
$templateCache.put("two.html","" +
"<div><input type='text' ng-model='vm.private2'/>" +
"<div class='sco'><span>原始类型</span>{{test}}</div>" +
"</div>")
}])
</script>
</html>
使用$parent.name调用内部方法来实现。
进行原型继承即意味着父作用域在子作用域的原型链上，这是JavaScript的特性。
AngularJS的作用域还存在如下内部定义的关系：
scope.$parent指向scope的父作用域；
scope.$$childHead指向scope的第一个子作用域；
scope.$$childTail指向scope的最后一个子作用域；
scope.$$nextSibling指向scope的下一个相邻作用域；
scope.$$prevSibling指向scope的上一个相邻作用域；
通过在子级作用域中使用scope.$parent.name，来获取对父级作用域的双向绑定。
示例如下：
<!DOCTYPE html>
<html lang="en" ng-app="childScope">
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.min.js" type="text/javascript"></script>
<style>
.inputOne{
width: 100px;
height: 50px;
background: skyblue;
}
.inner{
border: 1px solid skyblue;
width: 200px;
height: 150px;
}
.outer{
border: 1px solid salmon;
width: 200px;
height: 150px;
}
.sco{
background: skyblue;
}
</style>
</head>
<body ng-controller="childCon">
<div class="inner">
<h3>父级作用域</h3>
<span>{{private1}}</span>
<span>{{private2}}</span>
</div>
<div class="outer">
<h3>自己作用域</h3>
<div class="one" ng-include src="'one.html'"></div>
<div class="two" ng-include src="'two.html'"></div>
</div>
</body>
<script>
var app=angular.module("childScope",['template'])
.controller("childCon",["$scope", function ($scope) {
$scope.private1=12;
$scope.private2=22;
$scope.test=123;
}]);
var template=angular.module("template",[])
.run(["$templateCache", function ($templateCache) {
$templateCache.put("one.html","" +
"<div><input type='text' ng-model='$parent.private1'/></div>")
}])
.run(["$templateCache", function ($templateCache) {
$templateCache.put("two.html","" +
"<div><input type='text' ng-model='$parent.private2'/>" +
"<div class='sco'><span>原始类型</span>{{test}}</div>" +
"</div>")
}])
</script>
</html>
总结
以上就是AngularJS子级作用域问题的全部内容，希望对大家学习和工作能有所帮助。大家如果有什么疑问，欢迎提出来。
-
本文向大家介绍浅谈angularJS 作用域，包括了浅谈angularJS 作用域的使用技巧和注意事项，需要的朋友参考一下 案例说明： 虽然在 childCtrl 中没有定义具体的 args 属性，但是因为 childCtrl 的作用域继承自 parentCtrl 的作用域， 因此，childCtrl通过原型链 到父作用域args 属性并设置到input中。且在父input中输入值自己动同步到子i
-
本文向大家介绍详谈AngularJs 控制器、数据绑定、作用域，包括了详谈AngularJs 控制器、数据绑定、作用域的使用技巧和注意事项，需要的朋友参考一下 上次分享完该系列文章后有朋友也建议说1.x版本除了维护也没有必要学习，可以学习2.0开始学习，我也知道1.x无论是从性能还是架构上都没有2.x好，但是我想因为现在也有一些朋友还在用1.x版本，因为1.x升级到2.x难度很大，甚至可以说重构，
-
本文向大家介绍简单谈谈javascript中的变量、作用域和内存问题，包括了简单谈谈javascript中的变量、作用域和内存问题的使用技巧和注意事项，需要的朋友参考一下 【变量】 [1]定义：可变的量，相当于给一个不定的数据起了一个外号。变量是存储信息的容器。 [2]特性：js中的变量是松散类型的，可以保存任何类型的数据。它只是在特定时间用于保存特定值的一个名字而已。由于不存在定义某个变量必须要
-
本文向大家介绍通过一次报错详细谈谈Point事件，包括了通过一次报错详细谈谈Point事件的使用技巧和注意事项，需要的朋友参考一下 前言 这篇文章在草稿箱里躺了很久，因为最近又遇到了相关问题，于是又整理了一下。请注意这里讲的不是 css 的 pointer-events。下面话不都说了，来一起看看详细的介绍吧。 起因 从某个月黑风高的晚上开始，有人发现我们的 web-app 在 Chrome 模拟
-
本文向大家介绍浅谈spring中scope作用域，包括了浅谈spring中scope作用域的使用技巧和注意事项，需要的朋友参考一下 今天研究了一下scope的作用域。默认是单例模式，即scope="singleton"。另外scope还有prototype、request、session、global session作用域。scope="prototype"多例。再配置bean的作用域时，它的头文
-
本文向大家介绍简单谈谈json跨域，包括了简单谈谈json跨域的使用技巧和注意事项，需要的朋友参考一下 这一篇文章呢，主要是之前一直听别人讲json跨域跨域，但是还是一头雾水，只知其一，于是一怒之下，翻阅各种资料，如果有不正确的地方，劳烦指正一下^_^ 首先，先了解浏览器有一个很重要安全性限制，即为同源策略：不同域的客户端脚本在无明确授权的情况下不能读些对方资源。跨域也就是不同源~ 简单的说，只要