安科网

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

雅特岚蒂斯

雅特岚蒂斯

2016-09-05

关注 关注

前言

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指令

雅特岚蒂斯

雅特岚蒂斯

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

angularjs 控制器

控制器在Angularjs中的作用是增强视图，它实际就是一个函数，用来向视图中的作用域添加额外的功能，我们用它来给作用域对象设置初始状态，并添加自定义行为。当我们在页面上创建一个控制器时，Angularjs会生成并传递一个$scope给这个控制器，由于An

youyouzouzou 2017-02-24

简单了解JavaScript作用域

作用域通常是指在指定的时间内，变量存在于一段代码中。缺乏对作用域的理解可能会导致令人沮丧的调试体验。作用域的概念是关于我们的代码中可以访问到哪些确定的函数或变量，代码的上下文和执行环境。在 JavaScript 中，有两种类型的作用域：全局和局部作用域。在

leowzl 2020-08-15

Python名称空间与作用域

在python解释器开始执行, 就会在内存中开辟一个空间, 每当遇到一个变量的时候, 就把变量名和值之间的关系记录下来,当遇到函数定义的时候, 解释器只是把函数名读入内存, 并检查语法是否正确，表示这个函数存在了, 至于函数内部的变量和逻辑, 解释器是不关

明天你好 2020-08-03

Python命名空间和作用域

emmm，这一块讲了2个内容，一个是命名空间，一个是作用域。A namespace is a mapping from names to objects.Most namespaces are currently implemented as Python

idning 2020-08-03

第八章 函数作用域

一个程序的所有的变量并不是在哪个位置都可以访问的。两种最基本的变量作用域如下：。Python中变量作用域分4种情况：。为了解决函数内使用全局变量的问题，python增加了global关键字， 利用它的特性， 可以指定变量的作用域。虽然闭包可以调用外层和全局

liusarazhang 2020-06-28

Python的命名空间和变量作用域

所谓的Namespaces就是一个名字的集合，每个名字都映射到一个对应的函数对象上去，可以用Python里面的dict来理解。当我们启动Python解释器的时候，它会自动开辟一个Built-in Namespaces，里面放所有的内置函数名，比如print

chenlxhf 2020-06-25

简单了解Python变量作用域正确使用方法

在写代码的时候，免不了要使用变量。但程序中的一个变量并不一定是在哪里都可以被使用，根据情况不同，会有不同的“有效范围”。但在调用了函数之后，x 的值仍然是50。像这样在函数内部定义的变量被称为“局部变量”。要注意的是，作用域是从变量被定义的位置开始。建议在

Jonderwu 2020-06-14

Web全栈工程师之路(三)——JavaScript篇(十六)——作用域

// console.log; 输出会报错，提示a没有被定义，fun函数中的a是在fun中定义的，只会在fun中起作用。console.log; //因为fun3里没有b，看向上一级fun2，fun2也没有，再看向fun2的上一级，即全局，有了，就输出。c

shikailonggy 2020-06-05

c/c++ 变量的存储类型和作用域

未指定变量的存储类型，缺省为auto。而静态全局变量则限制了其作用域，即只在定义该变量的源文件内有效，在同一源程序的其它源文件中不能使用它。由于静态全局变量的作用域限于一个源文件内，只能为该源文件内的函数公用，因此可以避免在其他源文件中引起错误。而C++中

shangs00 2020-05-09

函数参数与变量的作用域+程序流程总结

调用函数时，matlab有两个预定义变量。可以实现一个函数，多个功能。返回不同的函数值。在命令行窗口中输入命令并得到输出结果。在程序设计中，全局变量破坏了函数对变量的封装，降低了程序的可读性。

wanff0 2020-05-04

浅析 JS 中的作用域链

在 JS 中每个函数都有自己的执行环境，而每个执行环境都有一个与之对应的变量对象。思考为什么上面函数中的 fn 运行后输出 1，可能大家都知道，但是为什么会输出 1 呢，用上面的变量对象来理解就可以得出答案。这个 fn 就是函数 fn 对应的变量对象，我们

ChinaGuanq 2020-05-01

Spring Bean 作用域

当在 Spring 中定义一个 bean 时，你必须声明该 bean 的作用域的选项。例如，为了强制 Spring 在每次需要时都产生一个新的 bean 实例，你应该声明 bean 的作用域的属性为 prototype。Spring 框架支持以下五个作用域

whbing 2020-04-21

SpringIOC容器-xml配置bean-bean的作用域

纯粹的SpringIOC容器中，bean的作用域有2中，用bean标签中的scope来标注，分别是singleton和prototype. prototype表示SpringIOC容器在初始化的时候，不会创建此bean，每次请求的时候，会自动创建一个新的b

hyxinyu 2020-04-18

JavaScript作用域链特性----闭包

　　了解闭包，必须要清楚 JavaScript 的特性 -----> 作用域 、作用域链、执行上下文 。　　闭包的构成。　　闭包性能考量。　　闭包可以延长变量的生命周期。--------让其存在一种引用关系，使之不被垃圾回收机制回收。　　通过函数re

sunlizhen 2020-04-17

php的常量 、变量和作用域

设置常量，使用define()函数 ， 它使用三个参数：首个参数定义常量的名称 第二个参数定义常量的值 可选的第三个参数规定常量名是否对大小写不敏感 ，默认是 false

amberom 2020-03-28

Javascript中作用域的修改以及with语句

问题来自看JavaScript高级程序设计遇到了延长作用域的问题.不能理解文中解释的内容,于是网上查到一些相关文章.关于Javascript静态作用域的一些心得。之前在看JS大牛BYVoid的<<NodeJS开发指南一书>>时, 学

zgwyfz 2020-03-28

MyBatis（四）：SqlSession及其工厂类的作用域和生命周期

SqlSession可以通过Sql Mapper.class进行数据库操作，或者直接使用SqlSession的方法输入SqlMapper.方法（）进行数据库操作，使用完要关闭。就是SqlSessionFactory的建造器，典型的工厂模式。创建后就不再需要

XCMercy 2020-03-26

python 函数嵌套 以及 对于多函数共同运行应该注意的点

用 global，可将局部变量声明为全局变量。

liugan 2020-03-03

JavaScript函数作用域

今天跟大家分享一下JavaScript的作用域，那么什么是作用域呢？变量不是在所有地方都可以使用的，而这个变量的使用范围就是作用域。JavaScript划分作用域是用大括号划分的，但是JavaScript之中有效限定的大括号只有函数大括号。全局作用域在页面

ThinkingLink 2020-02-29

一个基本的面试问题：可以解释一下什么是闭包吗？

面对面试问题，我们总是如临大敌。之前，我参加了一个面试，其中工程团队要求我解释闭包的含义。众所周知，闭包这个术语因难以定义而臭名昭著。面试后，我对自己仍恐惧这个问题感到沮丧。文章开始前，我先阐明不会涉及的内容。在ES6之前的时代，闭包的常见用例是用于模仿私

Livis的开发之路 2020-02-28
雅特岚蒂斯

雅特岚蒂斯

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号