首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

详细谈谈AngularJS的子级作用域问题

Posted in Javascript onSeptember 05, 2016

前言

AngularJS自带指令目前有ng-include、ng-view、ng-switch、ng-repeat。这样的原因是因为，这些指令虽然是AngularJS内部定义的，但是也是和directive实现的方法都是一样的，其内部使用的是scope:true的方式，子作用域继承了父级的作用，并且构建了一个独立的子作用域，所有双向绑定实现不了，只能单独实现子级作用域继承父级的属性。

AngularJS的继承是通过javascript的原型继承方式实现的，进行原型继承即意味着父作用域在子作用域的原型链上。因为原型链的检索只会在属性检索的时候触发，不会在改变属性值的时候触发。所以我们需要把原始类型转换成对象，把值绑定在对象的属性上。

详细谈谈AngularJS的子级作用域问题

大家可以在示例上看到，经过改造之后，就可以实现子级修改父级作用域的属性。原始类型只能继承父类的作用域。

实现方法目前看有三种，下面一次来介绍

通过给父级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的子级作用域问题

- Author -

MakingChoice

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript中的五种数据类型详解
Dec 26 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
Vue项目打包编译优化方案
Sep 16 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 #Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 #Javascript
JS简单随机数生成方法
Sep 05 #Javascript
使用React实现轮播效果组件示例代码
Sep 05 #Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 #Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 #Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 #Javascript
日本购物网站(72) 俄罗斯购物网站(137) 韩国购物网站(27) 印度购物网站(45) 马来西亚购物网站(41) 墨西哥购物网站(16) 西班牙购物网站(115) 加拿大购物网站(185) 德国购物网站(227) 瑞士购物网站(28)
You might like
php实例分享之二维数组排序
2014/05/15 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
如何在PHP中生成随机数
2020/06/04 PHP
Javascript优化技巧（文件瘦身篇）
2008/01/28 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
非jQuery实现照片散落桌子上，单击放大的LightBox效果
2014/11/28 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
numpy基础教程之np.linalg
2019/02/12 Python
Python根据服务获取端口号的方法
2019/09/25 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解）)
2019/12/09 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
keras slice layer 层实现方式
2020/06/11 Python
出纳岗位职责
2013/11/09 职场文书
财务分析个人的自荐书范文
2013/11/24 职场文书
采购员的工作职责
2013/12/26 职场文书
员工培训邀请函
2014/01/11 职场文书
医学生个人求职信范文
2014/02/07 职场文书
初中班主任寄语
2014/04/04 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
商务经理岗位职责
2014/07/30 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
mysql分表之后如何平滑上线详解
2021/11/01 MySQL