序

目前AngularJS的指令包括ng-include、ng-view、ng-switch和ng-repeat。这样做的原因是，虽然这些指令是由AngularJS在内部定义的，但它们与指令实现的指令是相同的。内部使用scope:true的方式，子作用域继承父作用域的角色，构造一个独立的子作用域。不能实现所有的双向绑定，只有子作用域可以独立继承父作用域的属性。

AngularJS的继承是通过javascript原型继承实现的，这意味着父作用域在子作用域的原型链上。因为原型链的检索只会在检索属性时触发，而不会在属性值改变时触发。因此，我们需要将原始类型转换为对象，并将值绑定到对象的属性。

从示例中可以看出，在修改之后，子对象可以修改父范围的属性。原始类型只能继承父类的范围。

目前有三种实现方式，下次会介绍

通过将{}添加到父范围，原始类型被转换为对象。

代码如下：

！DOCTYPE html html lang=' en ' ng-app=' childScope ' head meta charset=' UTF-8 ' title/title script src=' http : lib/angular . min . js ' type=' text/JavaScript '/script style。inputOne { width: 100px高度： 50px；背景skyblue} .内部{ border: 1px固态skyblue宽度： 200 px；高度： 150像素；} .外层{ border: 1px固体三文鱼；宽度： 200 px；高度： 150像素；} .sco { background: skyblue}/style/head body ng-controller=' child con ' Div class=' inner ' H3 parent scope/H3 span { { VM . private 1 } }/span span { { VM . private 2 } }/span/Div class=' outer ' H3自己的作用域/H3 Div class=' one ' ng-include src=' http 3360 ' one . html ' '/Div class=' two ' ng-include src=' http 3360 ' two . html ' '/Div/Div/body script var app=angular控制器(' childCon '，['$scope '，函数($ scope){ var VM=$ scope . VM={ }；vm.private1=12vm.private2=13$ scope.test=123}]);var template=angular . module(' template '，[])。运行(['$templateCache '，函数($ Templatecache){ $ Templatecache . put(' one . html '，' ' ' divinput type=' text ' ng-model=' VM . private 1 '//div ')}])。run(['$templateCache '，function($ template cache){ $ template cache . put(' two . html '，' div输入类型=' text ' ng-model=' VM . private 2 '/div class=' SCO ' span原语类型/span { { test } }/div ' '/div ')})/script/html由控制器作为语法实现

实际上，控制器as相当于控制器的示例对象，其原理是将原始类型转换为对象类型。

！DOCTYPE html html lang=' en ' ng-app=' childScope ' head meta charset=' UTF-8 ' title/title script src=' http : lib/angular。量滴js ' type=' text/JavaScript '/脚本样式.inputOne { width: 100px高度： 50px背景skyblue}。内部{ border: 1px固态天蓝色宽度： 200像素；高度： 150像素；} .外层{ border: 1px固体三文鱼；宽度： 200像素；高度： 150像素；} .SCO { background : sky blue }/style/head body ng-controller=' childCon as VM ' div class=' inner ' H3父级作用域/H3 span { { VM。私有1 } }/span span { { VM。二等兵2)H3外围自己作用域/H3 div class=' one ' ng-include src=' http : ' one。html ' '/div div class=' two ' ng-include src=' http : ' two。html ' '/div/div/body脚本var app=angular。模块('子范围'，['模板']).控制器(' childCon '，['$scope '，函数($ scope){ this。私有1=12；this . private 2=22 $ scope . test=123 }])；var模板=角度。模块('模板'，[]).运行(['$templateCache '，函数($ Templatecache){ $ Templatecache。放('一。html '，' ' ' divinput type=' text ' ng-model=' VM。private 1 '/div ')}]).运行(['$templateCache '，函数($ Templatecache){ $ Templatecache。放('二。html '，' ' ' divinput type=' text ' ng-model=' VM。私有2 '/div class=' SCO ' span原始类型/span { { test } }/div ' '/div ')}])/script/html使用$parent.name调用内部方法来实现。

进行原型继承即意味着父作用域在子作用域的原型链上，这是Java脚本语言的特性。

AngularJS的作用域还存在如下内部定义的关系：

范围。$家长指向范围的父作用域；

范围$$childHead .指向范围的第一个子作用域；

范围$ $儿童尾巴.指向范围的最后一个子作用域；

范围。$ $下一个兄弟指向范围的下一个相邻作用域；

范围。$ $上一个同级指向范围的上一个相邻作用域；

通过在子级作用域中使用范围$parent.name，来获取对父级作用域的双向绑定。

示例如下：

！DOCTYPE html html lang=' en ' ng-app=' childScope ' head meta charset=' UTF-8 ' title/title script src=' http : lib/angular。量滴js ' type=' text/JavaScript '/脚本样式.inputOne { width: 100px高度： 50px背景skyblue}。内部{ border: 1px固态天蓝色宽度： 200像素；高度： 150像素；} .外层{ border: 1px固体三文鱼；宽度： 200像素；高度： 150像素；} .SCO { background : sky blue }/style/head body ng-controller=' Childcon ' div class=' inner ' H3父级作用域/H3 span { { private 1 } }/span span { { private 2 } }/span/div class=' outer ' H3自己作用域/H3 div class=' one ' ng-include src=' http : ' one。html ' '/div div class=' two ' ng-include src=' http : ' two。html ' '/div/div/body脚本var app=angular。模块('子范围'，['模板']).控制器(' childCon '，['$scope '，函数($ scope){ $ scope。私有1=12；$ scope . private 2=22 $ scope . test=123 }])；var模板=角度。模块('模板'，[]).运行(['$templateCache '，函数($ Templatecache){ $ Templatecache。放('一。html '，' ' ' divinput type=' text ' ng-model=' $ parent。private 1 '/div ')}]).运行(['$templateCache '，函数($ Templatecache){ $ Templatecache。放('二。html '，' ' ' divinput type=' text ' ng-model=' $ parent。私有2 '/div class=' SCO ' span原始类型/span { { test } }/div ' '/div ')}])/script/html总结

以上就是AngularJS子级作用域问题的全部内容，希望对大家学习和工作能有所帮助。大家如果有什么疑问，欢迎提出来。