angular作用域分析

时间：2021-08-05 14:56:45

angualr作用域 Scope

控制器作用域的继承特性Ⅰ



- 绑定的数据是变量
- 单向隔离（兄弟之间互不影响，父子之间单向继承）
- 父级控制器的数据绑定会影响到子级控制器
- 前提是子控制器内没有绑定数据
- 单向原理：当我们改变子控制器数据时，其会在子控制器内部动态添加`$scope.name='XXX'` 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<body ng-app="myApp">

 <div ng-controller="myCtr">

    <input type="text"  ng-model="name">

    <div ng-controller="myCtr1">

      <input type="text" ng-model="name">

    </div>

    <div ng-controller="myCtr2">

      <input type="text" ng-model="name">

    </div>

 </div>  

<script src="angular.min.js"></script>

<script>

var app = angular.module("myApp", [])

app.controller('myCtr', ["$scope",function($scope){

    $scope.name ='scale'

}]);

app.controller('myCtr1', ["$scope",function($scope){

}]);

app.controller('myCtr2', ["$scope",function($scope){

}]);

</script>

</body>

</html>

控制器作用域的继承特性Ⅱ



- 绑定的数据是对象
- 双向影响（父级影响子级，子级影响父级）
- 双向原理：其会找子作用域有没有对象类型数据绑定，若没有，找父级，找到后在原有对象数据上动态添加`$scope.name={title:'XXX'}`，从而再次影响子级
- 不像变量，会直接在子作用域添加 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<body ng-app="myApp">

 <div ng-controller="myCtr">

    <input type="text"  ng-model="name.title">

    <div ng-controller="myCtr1">

      <input type="text" ng-model="name.title">

    </div>

    <div ng-controller="myCtr2">

      <input type="text" ng-model="name.title">

    </div>

 </div>  

<script src="angular.min.js"></script>

<script>

var app = angular.module("myApp", [])

app.controller('myCtr', ["$scope",function($scope){

    $scope.name ={title: 'scale'}

}]);

app.controller('myCtr1', ["$scope",function($scope){

}]);

app.controller('myCtr2', ["$scope",function($scope){

}]);

</script>

</body>

</html>

scope:true; scope:false; scope:{}



- scope:true,自定义指令不会影响父作用域，即：有自己的作用域与外隔离，单向继承，默认为false,双向影响
- scope:{} 完全隔离，互不影响 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<body ng-app="myApp">

 <div ng-controller="myCtr">

    <input type="text"  ng-model="name">

    <div ng-controller="myCtr1">

      <input type="text" ng-model="name">

    </div>

    <div ng-controller="myCtr2">

      <input type="text" ng-model="name">

    </div>

    <div my-title></div>

 </div>  

<script src="angular.min.js"></script>

<script>

var app = angular.module("myApp", [])

app.controller('myCtr', ["$scope",function($scope){

    $scope.name = 'scale';

}]);

app.controller('myCtr1', ["$scope",function($scope){

}]);

app.controller('myCtr2', ["$scope",function($scope){

}]);

app.directive('myTitle', function(){

   return {

   	restrict: 'EA',

   	template: '<input type="text" ng-model="name">',

   	scope: true                //scope:true,自定义指令不会影响父作用域，即：有自己的作用域与外隔离，单向继承（父影响子），默认为false,双向影响

   }

});

</script>

</body>

</html>

(@ 、= 、&)



- （@）单向绑定 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<body ng-app="myApp">

 <div ng-controller="myCtr">

    <input type="text" ng-model="color">

    <h1 my-title color="{{color}}"></h1>

 </div>  

<script src="angular.min.js"></script>

<script>

var app = angular.module("myApp", [])

app.controller('myCtr', ["$scope",function($scope){

    $scope.name='德玛西亚';

    $scope.color="red"

}]);

app.directive('myTitle', function(){

   return {

   	restrict: 'EA',

   	template: '{{color}}<span style="color:{{color}}">德玛西亚</span><input type="text" ng-model="color">',

   	scope: {color:'@color'}           //通过（@）号实现指令与控制器单向数据绑定

   }

});

</script>

</body>

</html>
  • (=)双向数据绑定
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<body ng-app="myApp">

 <div ng-controller="myCtr">

    <input type="text" ng-model="name">

    <h1 my-title color="name"></h1>

 </div>  

<script src="angular.min.js"></script>

<script>

var app = angular.module("myApp", [])

app.controller('myCtr', ["$scope",function($scope){

    $scope.name='red';

}]);

app.directive('myTitle', function(){

   return {

   	restrict: 'EA',

   	template: '<span style="color:{{color}}">德玛西亚</span><input type="text" ng-model="color">',

   	scope: {color:'=color'}                      //通过（=）号实现指令与控制器双向数据绑定

   }

});

</script>

</body>

</html>
  • (&)调用父作用域
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<body ng-app="myApp">

 <div ng-controller="myCtr">

    <h1 my-title color="callback()"></h1>

 </div>  

<script src="angular.min.js"></script>

<script>

var app = angular.module("myApp", [])

app.controller('myCtr', ["$scope",function($scope){

    $scope.callback = function () {

    	return '德玛西亚';

    }

}]);

app.directive('myTitle', function(){

   return {

   	restrict: 'EA',

   	template: '<h3>{{color()}}</h3>',

   	scope: {color:'&color'}            //通过&符号调用父作用

   }

});

</script>

</body>

</html>

angular作用域分析的更多相关文章

  1. angular代码分析之异常日志设计

    angular代码分析之异常日志设计 错误异常是面向对象开发中的记录提示程序执行问题的一种重要机制,在程序执行发生问题的条件下,异常会在中断程序执行,同时会沿着代码的执行路径一步一步的向上抛出异常,最 ...

  2. Kotlin扩展作用域分析与扩展的根本作用解析

    在上一次https://www.cnblogs.com/webor2006/p/11219358.html学习了Kotlin的扩展,继续这个话题继续拓展,首先提出这么一个问题:假如我们扩展的方法跟类中 ...

  3. Angular作用域的层级概念&lpar;scope&rpar;

    首先引入 angular 的根作用域:$rootScope ng-app:定义了angualr的作用域 ng-controller:定义了控制器 $scope定义了视图与控制器之间的纽带,而scope ...

  4. 对于&lpar;function&lpar;&rpar;&lbrace;&rcub;&lpar;&rpar;&rpar;和function&lpar;&rpar;&lbrace;&rcub;实例的作用域分析（里面有很多问题……）

    今天在群里看到一个问题,让我纠结了好一会.下面是我的分析,感觉里面还有很多问题,关于作用域还是不太理解,希望大家看到问题第一时间反馈给我,看到实在受不了的地方说几句都没关系,谢谢. 请看题: 1.对象 ...

  5. Angular——作用域

    基本介绍 应用App是无法嵌套的,但是controller是可以嵌套的,每个controller都会对应一个模型(model)也就是$scope对象,不同层级的controller下的$scope遍产 ...

  6. Ext&period;onReady&lpar;function&lpar;&rpar;&lbrace;&rcub; &rpar;函数的作用域分析&lpar;1&rpar;

    Ext.onReady(function(){ var genResultDelete = function(){ alert('delete') ; } var renderResult = fun ...

  7. Angular开发者指南（六）作用域

    什么是作用域? 作用域是引用应用程序模型的对象. 它是表达式的执行上下文. 作用域以层次结构排列,模仿应用程序的DOM结构,它可以观察表达式和传播事件. 作用域的特征 Scope提供API($watc ...

  8. AngularJS讲义 - 作用域

    什么是作用域? Angular中作用域(scope)是模板以及工作的上下文环境,作用域中存放了应用模型和视图相关的回调行为.作用域是层次化结构的与相关联的DOM结构相对应.作用域可以观察表达式以及传播 ...

  9. angularjs源码分析之：angularjs执行流程

    angularjs用了快一个月了,最难的不是代码本身,而是学会怎么用angular的思路思考问题.其中涉及到很多概念,比如:directive,controller,service,compile,l ...

随机推荐

  1. SQL Server 存储过程遇到&OpenCurlyDoubleQuote;表 &&num;39&semi;&num;TT&&num;39&semi; 没有标识属性。无法执行 SET 操作”错误

    创建临时表,往临时表插入数据的时候报的错误. 一开始提示没有打开主键,后来打开主键就提示上述错误异常. 从网上查找资料没有找到,然后又到群里问各位大牛,一位大牛告诉我是没有设置主键. 我又仔细看看提示 ...

  2. s3c2440 mpll

    S3C2440有两个PLL(phase locked loop)一个是MPLL,一个是UPLL.MPLL用于CPU及其他外围器件,UPLL用于USB.用于产生FCLK, HCLK, PCLK三种频率, ...

  3. &lbrack;linux&rsqb; FastDFS访问文件，400 Bad Request

    linux 安装nginx,FastDFS后,启动访问指定文件出错, 文件名称格式化错误. 解决办法: vi /etc/fdfs/mod_fastdfs.conf 将 url_have_group_n ...

  4. solr5&period;2&period;1环境搭建教程

    环境:w8.1 + solr5.2.1 + apache7.0+jdk1.7 解压:solr5.2.1 复制E:\solr-5.2.1\server\webapps 下的solr.war包到D:\ap ...

  5. 【张泽华】android视频教程下载地址及上课源代码

    http://note.youdao.com/share/?id=f39bf918842c7b0673a033d35d734073&type=notebook#/1AC357745ED74BC ...

  6. Java服务器下载速度的限制

    没有取之不尽,用之不竭的资源.server有限的带宽.运营商可以限制一点点.近期使用云存储openstack swift待办事项文件存储下载.如果第一个限速code: private Long wri ...

  7. JS操作数组常用的方法

    JS操作Array对象的方法 concat(arr1,arr2,...):连接数组indexOf(value):返回数组中value的第一个索引join(separator):将数组中所有的元素连接由 ...

  8. 微信小程序 无限加载 上拉加载更多

    加载更多,其实就是再次向接口发送请求,把返回的数据,追加到渲染页面的数组里的过程,具体实现实例如下: demo.js // pages/project/project.js const app = g ...

  9. WAMP不能启动&comma; 一直处于红色图标或者橙色图标的解决办法

    WAMP不能启动, 一直处于红色图标(正常启动为绿色吧) 考虑是端口的问题,我找到wamp文件夹中的wamp\bin\apache\apache2.2.22\conf路径下的httpd.conf文件, ...

  10. 关于Tomcat 开启不了的几点解释

    这段时间基本熟悉java语言基本语法包,类(内部,外部),整体结构跟c#还是有点差异,在接口,多态,抽象等几乎一致,唯一差异仅存在于关键字上. 在用了几天记事本熟悉代码上,昨天晚上就准备转想myEcl ...

相关文章