详细谈谈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子级作用域问题的全部内容，希望对大家学习和工作能有所帮助。大家如果有什么疑问，欢迎提出来。

赞 (0)

相关推荐

  • AngularJS实现单独作用域内的数据操作

    AngularJS实现单独作用域内的数据操作

    照例先看效果 下面是这个例子的代码: <!DOCTYPE html> <html lang="en" ng-app="scApp"> <head> <meta charset="UTF-8"> <title></title> <script src="lib/angular.min.js" type="text/javascript&quo

  • Angular的MVC和作用域

    Angular的MVC和作用域

    首先看看Angular的控制器. <!DOCTYPE HTML> <html ng-app> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>angular</title> <script type="text/javascript" src=&quo

  • 详解AngularJS中的作用域

    详解AngularJS中的作用域

    范围扮演其视图连接控制器的角色一个特殊的JavaScript对象.范围包含了模型数据.在控制器,模型数据通过$scope对象访问. <script> var mainApp = angular.module("mainApp", []); mainApp.controller("shapeController", function($scope) { $scope.message = "In shape controller"; $s

  • AngularJS 作用域详解及示例代码

    AngularJS 作用域详解及示例代码

    范围扮演其视图连接控制器的角色一个特殊的JavaScript对象.范围包含了模型数据.在控制器,模型数据通过$scope对象访问. <script> var mainApp = angular.module("mainApp", []); mainApp.controller("shapeController", function($scope) { $scope.message = "In shape controller"; $s

  • AngularJS入门教程之Scope(作用域)

    AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Scope 可应用在视图和控制器上. 如何使用 Scope 当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递: AngularJS 实例 控制器中的属性对应了视图上的属性: <!DOCTYPE html> <html> <head> <me

  • 关于angularJs指令的Scope(作用域)介绍

    关于angularJs指令的Scope(作用域)介绍

    每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. 1.scope = false JS 代码: html 代码: result: 修改文本框的内容,两个名字都会变,实际上修改的是同一个$scope的name属性. 2. scope=true

  • Angularjs全局变量被作用域监听的正确姿势

    如果你只想知道结论: $scope.$watch($rootScope.xxx,function(newVal,oldVal){ //do something }) 马上就有人问为什么不是: $rootScope.$watch("xxx",function(newVal,oldVal){ //do something }) 从我最近的一个bug来说说为什么要用第一种方式. 逻辑如图,一开始我使用了 $rootScope.$watch 的写法.因为 angularjs 在 $rootSc

  • AngularJs学习第五篇从Controller控制器谈谈$scope作用域

    AngularJs学习第五篇从Controller控制器谈谈$scope作用域

    Controller的创建 AngularJs controller使用无处不在,在里代码演示比较简单的创建工作. <!DOCTYPE html> <html xmlns="http://www.w.org//xhtml" ng-app="exampleApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset

  • 详解JavaScript的AngularJS框架中的作用域与数据绑定

    详解JavaScript的AngularJS框架中的作用域与数据绑定

    AngularJS 简介 AngularJS 是由 Google 发起的一款开源的前端 MVC 脚本框架,既适合做普通 WEB 应用也可以做 SPA(单页面应用,所有的用户操作都在一个页面中完成).与同为 MVC 框架的 Dojo 的定位不同,AngularJS 在功能上更加轻量,而相比于 jQuery,AngularJS 又帮您省去了许多机械的绑定工作.在一些对开发速度要求高,功能模块不需要太丰富的非企业级 WEB 应用上,AngularJS 是一个非常好的选择.AngularJS 最为复杂同

  • 学习Angular中作用域需要注意的坑

    Angular作用域 在用angular搭建的网页应用中,作用域(scope)这个概念是贯穿其中的.在angular的视图(view)中的很多指令是会创建一个作用域的,例如 ng-app , ng-controller 等.这个作用域就是我们在写控制器构造函数时注入的 $scope (angular1.2之前的版本),他是视图模型(view model)中的一个概念.我们的数据模型(model)就是定义在作用域中的. Angular作用域的坑 用过angular的人应该都会经过一个过程,就是刚开

  • 浅谈angularJS 作用域

    <!doctype html> <html ng-app="firstApp"> <head> <meta charset="utf-8"> <script src="angular-1.3.0.js"></script> </head> <body> <div ng-controller="parentCtrl"> &

随机推荐