AngularJs 指令中 的Scope属性
一、概念说明
可以是true、 false 、哈希对象 {}
1、true
新创建了一个作用域，且继承了父作用域；在初始化的时候，用了父作用域的属性和方法去填充我们这个新的作用域。它和父作用域不是同一个作用域。
2、false 默认（不指定时候 ）
创建的指令和父作用域（其实是同一个作用域）共享同一个model模型，在指令中修改模型数据，会反映到父作用域的模型中。
3、{}
新创建了一个作用域，不继承继承了父作用域。表示一个独立的作用域 isolated
例子：
scope :
{
name:'@',//结果就是test
detail:'=', //结果要通过$scope.detail计算
onUpdate:'&'//绑定一个事件
}
<user-details name ='test' detail='detail', on-update='updateIt(times)'></user-details>
二、例子
1、scope: false（或不写即默认false）
不产生新作用域，指令的作用域和父作用域是同一个对象
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<my-directive></my-directive>
<my-directive></my-directive>
</div> <script type="text/javascript">
var myAppModule = angular.module("myApp",[]); myAppModule
.controller('MyController', function($scope){
$scope.name = '2222';
})
.directive("myDirective",function(){
return {
restrict:'AE',
scope: false,//或不写即默认false,指令的作用域和父作用域是同一个对象
template:'<div><input type="text" ng-model="name"/>{{name}}</div><br>'
};
});
</script>
</body>
</html>
运行结果 ：
分析：一个输入改变，四个位置的内容一起改变。
作用域分析：ng-app产生rootScope,ng-controller指令产生一个作用域scope,两个指令myDirective，由于scope: false（或不写即默认false）,指令的作用域和父作用域是同一个对象。一共4个作用域。
所以，name在一个地方变了，就所有地方变。
2、scope: true
产生新作用域，而且继承父作用域属性和方法。两个指令作用域互相对立，而且都继承自父作用域（ng-controller产生）。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<my-directive></my-directive>
<my-directive></my-directive>
</div> <script type="text/javascript">
var myAppModule = angular.module("myApp",[]); myAppModule
.controller('MyController', function($scope){
$scope.name = '2222';
})
.directive("myDirective",function(){
return {
restrict:'AE',
scope: true,
template:'<div><input type="text" ng-model="name"/>{{name}}</div><br>'
};
});
</script>
</body>
</html>
运行结果;
两行数据立变化，即每个指令作用域互相独立，且继承父作用域。
3、scope: {}
产生独立新作用域，而且父作用域无关。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<my-directive></my-directive>
<my-directive></my-directive>
</div> <script type="text/javascript">
var myAppModule = angular.module("myApp",[]); myAppModule
.controller('MyController', function($scope){
$scope.name = '2222';
})
.directive("myDirective",function(){
return {
restrict:'AE',
scope: {},
template:'<div><input type="text" ng-model="name"/>{{name}}</div><br>'
};
});
</script>
</body>
</html>
运行结果，刚开始运行，都是空，因为，没有继承父作用域的name
输入一个输入框后，只跟指令内的作用域同步
输入另一个，两个指令间不互相影响
4、{}中的@
字符串绑定，即，把内容直接当做字符串输出，但是{{str2}}（<my-directive content="{{str2}}"></my-directive>），还是会解析成字符串再输出。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<my-directive content="test string"></my-directive>
<my-directive content="{{str2}}"></my-directive>
<my-directive content="test()"></my-directive>
</div> <script type="text/javascript">
var myAppModule = angular.module("myApp",[]); myAppModule
.controller('MyController', function($scope){
$scope.str1 = "hello";
$scope.str2 = "world";
$scope.str3 = "angular";
})
.directive("myDirective",function(){
return {
restrict:'AE',
scope: {
content:'@'
},
template:'<div>{{content}}</div>'
};
});
</script>
</body>
</html>
运行结果：
第一个和第三个都是字符串原样输出，第二个会解析后输出。
5、{}中=
变量绑定
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
ctrl:<input type="text" ng-model="testname"><br>
directive:<my-directive name="testname"></my-directive>
</div> <script type="text/javascript">
var myAppModule = angular.module("myApp",[]); myAppModule
.controller('MyController', function($scope){
$scope.testname="my name is hyx";
})
.directive("myDirective",function(){
return {
restrict:'AE',
scope:{
name:'='
},
template:'<input type="text" ng-model="name">',
repalce:true
};
});
</script>
</body>
</html>
解析过程：
（1 ）、在控制器MyController对应的div中，定义了一个变量ng-model —— testname。
（2）、 testname对应的是输入框中输入的值。
（3 ）、然后把这个变量当做一个参数传递给my-directive这个标签的name属性。
（4）、 在my-directive标签中，又把这个name绑定到模板中的一个输入框内。
最终两个输入框的内容被连接起来，无论改变哪一个输入框内的值，testname与name都会发生改变。即通过my-directive标签内的属性依赖关系把 testname与name连接在一起，
6、{}中的&
方法绑定，当做方法执行，sayHello,sayNo,参数动态绑定到输入框。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController"> <my-directive say="sayHello(name)"></my-directive>
<my-directive say="sayNo(name)"></my-directive>
</div> <script type="text/javascript">
var myAppModule = angular.module("myApp",[]); myAppModule
.controller('MyController', function($scope){
$scope.sayHello = function(name){
console.log("hello !"+ name);
};
$scope.sayNo = function(name){
console.log("no !"+ name);
};
})
.directive("myDirective",function(){
return {
restrict:'AE',
scope:{
say:'&'
},
template:'<input type="text" ng-model="username"/><br>'+
'<button ng-click="say({name:username})">click</button><br>',
repalce:true
};
});
</script>
</body>
</html>
通过say在scope中的定义，angular知道了say对应的是个方法。
通过{name:username}的关联，知道了传入的是username。
AngularJs 指令中 的Scope属性的更多相关文章
- angularjs指令中的scope
共享 scope 使用共享 scope 的时候,可以直接从父 scope 中共享属性.因此下面示例可以将那么属性的值输出出来.使用的是父 scope 中定义的值. js代码: app.controll ...
- 【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- AngularJS自定义指令directive：scope属性 （转载）
原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们 ...
- angularjs指令中scope参数 true、false、{} 的区别详解
scope 有三个参数 true.false.{} scope 默认是 false,当 scope设置为true时,会从父作用域继承并创建一个新的作用域对象, 按照true .false的反向思维,我 ...
- angularjs指令中的compile与link函数详解（转）
http://www.jb51.net/article/58229.htm 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link, ...
- angularjs指令中的compile与link函数详解补充
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你 ...
- AngularJs -- 指令中使用子作用域
下面将要介绍的指令会以父级作用域为原型生成子作用域.这种继承的机制可以创建一个隔离层,用来将需要协同工作的方法和数据模型对象放置在一起. ng-app和ng-controller是特殊的指令,因为它们 ...
- AngularJS 指令中的require
require参数可以被设置为字符串或数组,字符串代表另外一个指令的名字.require会将控制器注入到其值所指定的指令中,并作为当前指令的链接函数的第四个参数.字符串或数组元素的值是会在当前指令的作 ...
随机推荐
- Python如何管理内存？
对于Python来说,内存管理涉及所有包含Python对象和堆. Python内存管理器在内部确保对堆的管理和分配. Python内存管理器具有不同的组件,可处理各种动态存储管理方面,如共享,分段,预 ...
- Ubuntu下安装VS code
sudo add-apt-repository ppa:ubuntu-desktop/ubuntu-make sudo apt-get update sudo apt-get install ubun ...
- Codeforces 791B. Bear and Friendship Condition 联通快 完全图
B. Bear and Friendship Condition time limit per test:1 second memory limit per test:256 megabytes in ...
- 工具类Utils的单元测试方式
数据质量功能已经开发完毕,但是要实现单元测试覆盖率80%以上,其他的还好,只是这个工具类实在让我摸不着头脑,其实工具类的单元测试是最简单的,只是自己想复杂了而已: 无返回值模拟: 有返回值模拟: 异常 ...
- IntelliJ IDEA 配置svn
1.启用版本控制 2.在弹出的框中选择svn 3.下载并解压VisualSVN 下载地址:http://subversion.apache.org/packages.html#windows 4.i ...
- OpenSSH配置与基本使用
SSH访问远程 SSH常见分类: telnet-远程登录协议,23/TCP 明文认证.明文传输(不安全) ssh(Secure SHell)-应用层协议,22/TCP 通讯和认证过程加密.主机认证 用 ...
- 【转】【MySQL】时间类型存储格式选择
一 前言 昨天在给开发同学做数据库设计规范分享的时候,讲到时间字段常用的有三个选择datetime.timestamp.int,应该使用什么类型的合适?本文通过三种类型的各个维度来分析,声明:本文 ...
- 2019.01.20 NOIP模拟 迅雷（kruskal/二分+并查集）
传送门 题意简述:给一张带权无向图,有a,ba,ba,b两类特殊点和普通点,问使得至少有一个aaa和一个bbb连通所需要的所有边边权最小值的最大值是多少. 思路: 一眼发现可以二分,考虑怎么check ...
- vue-cli引入mui的步骤
不用npm安装了 1.mui官方GitHub下载mui所需文件 https://github.com/dcloudio/mui 把下载来的dist文件夹整个复制到static文件夹中 2.在index ...
- java常用设计模式九：桥接模式
一.概述 将抽象部分与它的实现部分分离,使它们都可以独立地变化.它是一种对象结构型模式.比如存在2个维度,第一个维度有一个抽象类A和对应的子类A1和A2:第二个维度有另一个接口B和对应的子类B1和B2 ...