angularjs指令中scope参数 true、false、{} 的区别详解
scope 有三个参数 true、false、{}
scope 默认是 false，当 scope设置为true时，会从父作用域继承并创建一个新的作用域对象，
按照true 、false的反向思维，我就理解为scope不设置，或者设置为false的时候，就不从父作用域继承（理解错误主要就是因为这句话）。
这里的不从父作用域继承可以分为两种情况
1、创建一个新的作用域对象，但不继承父作用域 （创建、不继承）
2、压根就不创建新的作用域对象，直接跟父作用域共享一个作用域，也就谈不到继承了。 （不创建、直接用、谈何继承）
弄清楚这个我就明白了，scope:false 和scope：true的本质区别是创不创建新的作用域对象，而不是继不继承的问题。
放几个例子，代码不多，直接写在一个里面了：
指令中的templateUrl共用一个模板：scopeTemplate.html
<p>我的名字是：{{ name }}</p> <!-- 常量 -->
<p>我的年龄是：{{ age }}</p> <!-- 变量 -->
<p><button ng-click="greeting()">称呼</button></p> <!-- 方法 -->
<input type="text" ng-model="name" />
<br /><br />
scope:false (跟父作用域共享一个作用域的时候)
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/angular.min.js" ></script>
</head>
<body>
<div ng-controller="myController">
<p>我的名字是：{{ name }}</p> <!-- 常量 -->
<p>我的年龄是：{{ age }}</p> <!-- 变量 -->
<p><button ng-click="greeting()">称呼</button></p> <!-- 方法 -->
<input type="text" ng-model="name" />
<br /><br />
<p>指令1 scope=false：</p>
<div my-directive></div>
</div>
</body> <script type="text/javascript">
var app = angular.module('myapp',[]);
app.controller('myController',['$scope',function($scope){
$scope.name = "wanglehui";
$scope.age = 23;
$scope.greeting = function(){
alert('我叫'+$scope.name);
}
}]) /* 指令2 scope==false */
app.directive('myDirective',[function(){
return{
restrict:'AE',
scope:false,
templateUrl:'scopeTemplate.html'
}
}])
</script>
</html>
测试的时候注意angularjs的版本问题。
这个很容易理解，两个同时改变，因为用的是同一个作用域，用的是同一个变量。
scope:true (从父作用域继承并创建一个新的作用域对象)
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/angular.min.js" ></script>
</head>
<body>
<div ng-controller="myController">
<p>我的名字是：{{ name }}</p> <!-- 常量 -->
<p>我的年龄是：{{ age }}</p> <!-- 变量 -->
<p><button ng-click="greeting()">称呼</button></p> <!-- 方法 -->
<input type="text" ng-model="name" />
<br /><br />
<p>指令1 scope=true：</p>
<div my-directive></div>
</div>
</body> <script type="text/javascript">
var app = angular.module('myapp',[]);
app.controller('myController',['$scope',function($scope){
$scope.name = "wanglehui";
$scope.age = 23;
$scope.greeting = function(){
alert('我叫'+$scope.name);
}
}]) /* 指令2 scope==true */
app.directive('myDirective',[function(){
return{
restrict:'AE',
scope:true,
templateUrl:'scopeTemplate.html'
}
}])
</script>
</html>
这块有一点需要注意下，
刷新——>输入第一个，第二个会跟着变——>输入第二个，第一个不变——>再输入第一个，第二个也不变了（之后两个互不影响）
刷新——>输入第二个，第一个不变——>输入第一个，第二个不变（之后两个互不影响）
也就是说，如果我们不在第二个输入框输入，也就不会在指令新建的作用域对象中创建新的变量，它每次显示的就是在父作用域中查询到的值
一旦输入，就已经在该对象下新建了一个变量。（这块跟js变量作用域的查找是一样的）
再看第三个 scope：{}
书上说这块叫隔离作用域，隔离.....也就是我是一个新的个体，跟外界没关系
前面说 scope:false 和scope：true的 本质区别是创不创建新的作用域对象，而不是继不继承的问题。
那么这里scope：{}和scope：true的 本质区别是继不继承父作用域的问题，而不是创不创建新的作用域对象的问题。
scope:{} (创建一个新的作用域对象，但不继承父作用域)
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/angular.min.js" ></script>
</head>
<body>
<div ng-controller="myController">
<p>我的名字是：{{ name }}</p> <!-- 常量 -->
<p>我的年龄是：{{ age }}</p> <!-- 变量 -->
<p><button ng-click="greeting()">称呼</button></p> <!-- 方法 -->
<input type="text" ng-model="name" />
<br /><br />
<p>指令 scope={}：</p>
<div my-directive></div>
</div>
</body> <script type="text/javascript">
var app = angular.module('myapp',[]);
app.controller('myController',['$scope',function($scope){
$scope.name = "wanglehui";
$scope.age = 23;
$scope.greeting = function(){
alert('我叫'+$scope.name);
}
}]) /* 指令2 scope==true */
app.directive('myDirective',[function(){
return{
restrict:'AE',
scope:{},
templateUrl:'scopeTemplate.html'
}
}])
</script>
</html>
如果想要scope{}中的变量与父作用域绑定, 就会用到angularjs中的绑定策略“@”，“=”，“&”
angularjs指令中scope参数 true、false、{} 的区别详解的更多相关文章
- JS中escape()、encodeURI()、encodeURIComponent()区别详解
avaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decode ...
- AngularJS 指令中的 replace:true
默认值是fasle,模板会被当作子元素插入到调用此指令的元素内部. <my-directive></my-directive> myModule.directive(" ...
- Batch批处理中的 参数 路径和字符串 处理详解
1.截取字符串 截取字符串可以说是字符串处理功能中最常用的一个子功能了,能够实现截取字符串中的特定位置的一个或多个字符.举例说明其基本功能: @echo off set ifo=abcdefghijk ...
- 【转】 深入main函数中的参数argc,argv的使用详解
C/C++语言中的main函数,经常带有参数argc,argv,如下: 复制代码 代码如下: int main(int argc, char** argv) 这两个参数的作用是什么呢?argc 是指命 ...
- JQuery中$.each 和$(selector).each()的区别详解
PS:晚上在写页面时,发现了一个问题,$.each 和$(selector).each()有哪些区别?百度搜索关键词,首页显示出来一些前人的经验,总结一下,发上来. 1.$(selector).eac ...
- php中const与define的使用区别 详解
1.const用于类成员变量定义,一旦定义且不能改变其值.define定义全局常量,在任何地方都可以访问. 2.define不能在类中定义而const可以. 3.const不能在条件语句中定义常量 i ...
- jsp中的@include与jsp:include区别详解
1 前言 搞java开发的人也许都知道在jsp中引入项目中其他文件有如下两种方式 <%@include file="xxx.jsp"%> <jsp:include ...
- java中==和equals和hashcode的区别详解
一.相同点 都是用来进行值或对象的比较. 二.不同点 对于“==”而言,对于基本类型(char,byte,short,int,long,float,double,boolean),对比的是值,所以是相 ...
- css中postion的fixed与absolute区别详解
fixed:固定定位,参照位置是浏览器窗口的左上角,即坐标点为(0px, 0px) absolute:绝对定位,参展位置是离当前元素最近的定位方式为fixed,absolute,relative的祖先 ...
随机推荐
- Python装饰器的深入理解
装饰器 #装饰器:本质上是函数,(装饰其他函数)就是为其他函数添加附加功能 #原则: 1.不能修改被装饰的函数的源代码 # 2.不能修改被装饰的函数的调用方式 #实现装饰器知识储备 #1.函数即变量 ...
- pandas.DataFrame
1.可以使用单个列表或列表列表创建数据帧(DataFrame). 单个列表 import pandas as pd data = [1,2,3,4,5] df = pd.DataFrame(data) ...
- 请求与响应编码及jsp基本原理
1.请求转发和请求包含 (1)请求转发: this.getServletContext().getRequestDispatcher("").forward(request,res ...
- spring学习总结(一)_Ioc基础(中)
本篇文章继续上篇文章讲解Ioc基础,这篇文章主要介绍使用spring注解配置Ioc 上篇文章主要是通过xml配置文件进行Ioc的配置.这次进行改造下,通过注解进行配置 首先先看一个简单的demo 简单 ...
- 两个序列求前k大和
---恢复内容开始--- 没有题目,没有题意,这是学长提过的一个技巧,给你两个排好序的序列,每次可以各从中取一个,求前k大的和, 一个优先队列,先将a序列中最大的那个和b序列所有元素相加存进队列中,每 ...
- 退役前的记录(2018.10.14-NOIP2018)
退役前的记录 诸位好,我是\(CJ\)最菜的\(Oier\),已经是\(G2\)的老年选手了,不知道什么时候就会退役了,总之\(G1\ double\)的机会已经没有了,去年因为联赛失利而止步,而今年 ...
- 构建squid代理服务器
基本概念 本文使用squid代理服务 软件介绍:百度百科 作为应用层的代理服务软件,Squid主要提供缓存加速.应用层过滤控制的功能: 工作机制:缓存网页对象,减少重复请求(HTTP代理的缓存加速对象 ...
- 挂载文件系统出现"kernel panic..." 史上最全解决方案
问:挂载自己制作的文件系统卡在这里: NET: Registered protocol family 1 NET: Registered protocol family 17 VFS: Mounted ...
- 【BZOJ5286】[HNOI2018]转盘（线段树）
[BZOJ5286][HNOI2018]转盘(线段树) 题面 BZOJ 洛谷 题解 很妙的一道题目啊.(全世界除了我这题都有40分,就我是一个状压选手 首先来发现一些性质,我们走一圈一定不会更差. 为 ...
- 用powershell 批量卸载 windows 更新
$KBID = "KB958488" $KBID1 = "KB976902" cls function Remove-Update { $HotFixes = ...