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

更新时间：2016年09月05日 14:43:37 作者：MakingChoice

大家在使用angularjs的时候，很容易忽略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下对数组的对比分析。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
ui-router中使用ocLazyLoad和resolve的具体方法
这篇文章主要介绍了ui-router中使用ocLazyLoad和resolve的具体方法，详细的介绍了ocLazyLoad和resolve的具体用法，非常具有实用价值，需要的朋友可以参考下
2017-10-10
Angular之jwt令牌身份验证的实现
这篇文章主要介绍了Angular之jwt令牌身份验证的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
angular十大常见问题
本文主要介绍了angular十大常见问题，具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
基于AngularJS的简单使用详解
下面小编就为大家带来一篇基于AngularJS的简单使用详解。小编觉得挺不错的，现在就想给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
angular2+node.js express打包部署的实战
本篇文章主要介绍了angular2+node.js express打包部署的实战，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
Angularjs中controller的三种写法分享
这篇文章给大家介绍了angularjs中controller的三种写法，每种写法都给出了示例代码，对大家理解和学习很有帮助，有需要的朋友们可以参考借鉴。
2016-09-09
AngularJS模块学习之Anchor Scroll
这篇文章主要介绍了AngularJS模块学习之Anchor Scroll 的相关资料,需要的朋友可以参考下
2016-01-01
详解Angular的双向数据绑定(MV-VM)
本文主要对Angular的双向数据绑定(MV-VM)进行实例分析，具有一定的参考价值，下面跟着小编一起来看下吧
2016-12-12
在AngularJS中使用jQuery的zTree插件的方法
这篇文章主要介绍了在AngularJS中使用jQuery的zTree插件的方法,Angular中集成了jqLite,但还不是完全版的jQuery,需要的朋友可以参考下
2016-04-04