AngularJs指令配置参数scope详解
AngularJs最重要也是最难理解的模块之一就是它的指令(directive)了,自定义指令配置有很多个参数,下面我只说说其中scope的配置极其含义。
scope表示指令的作用域,它有三个可选值:true、false、对象{}。
.directive("myDirective", function(){
return {
restrict: "EA",
scope: true/false/{},
template: "<div>{{content}}</div>"
}
})
true:继承父作用域且创建独立作用域;
false:继承父作用域;
{}:不继承父作用域且创建独立作用域;
分别是什么意思呢?看真实demo:
源码:
<div ng-app="myModule">
<h3>请分别修改父、子作用域表单里的值</h3>
<div ng-controller="myController">
指令配置:scope: true <br/>
父作用域:<input type="text" ng-model="content" /><br/>
子作用域:<my-directive></my-directive><br/><br/>
</div>
<div ng-controller="myController2">
指令配置:scope: false <br/>
父作用域:<input type="text" ng-model="content" /><br/>
子作用域:<my-directive2></my-directive2><br/><br/>
</div>
<div ng-controller="myController3">
指令配置:scope: {} <br/>
父作用域:<input type="text" ng-model="content" /><br/>
子作用域:<my-directive3></my-directive3>
</div> </div>
<script type="text/javascript">
var myModule = angular.module("myModule", []);
myModule.controller("myController", ['$scope', function($scope){
$scope.content = "自定义指令";
}])
myModule.controller("myController2", ['$scope', function($scope){
$scope.content = "自定义指令";
}])
myModule.controller("myController3", ['$scope', function($scope){
$scope.content = "自定义指令";
}])
myModule.directive("myDirective", function(){
return {
restrict: "EA",
scope: true,
template: "<input type='text' ng-model='content' />"
}
})
myModule.directive("myDirective2", function(){
return {
restrict: "EA",
scope: false,
template: "<input type='text' ng-model='content' />"
}
})
myModule.directive("myDirective3", function(){
return {
restrict: "EA",
scope: {},
template: "<input type='text' ng-model='content' />"
}
})
</script>
分别修改父域、子域里的值会发现:
scope为true时,修改父域的值会影响到子域,修改子域不影响父域,因为子域是独立的;
scope为 false时,修改父域的值会影响子域,修改子域也会影响父域,是双向绑定,scope配置默认值是false;
scope为{}时,修改父域的值不影响子域,修改子域也不会影响父域,子域是完全隔离的作用域;
另外,当scope为非空对象时,父域和子域可以以指定的方式传递指定的数据,这就是指令与指令之间的交互。
数据传递也分三种方式:@、=、&,先看demo:
源码:
<div ng-app="myModule">
<h3>请分别修改父、子作用域表单里的值</h3>
<div ng-controller="myController">
父作用域:<br/>
<input type="text" ng-model="name" /><br/>
<input type="text" ng-model="sex" /><br/>
<input type="button" ng-click="say()" value="点击执行父域的say方法" /><br/>
子作用域:<br/>
<my-directive my-name="{{name}}" my-sex="sex" get-name='say()'></my-directive><br/>
</div> </div>
<script type="text/javascript">
var myModule = angular.module("myModule", []);
myModule.controller("myController", ['$scope', function($scope){
$scope.name = "wangmeijian";
$scope.sex = "boy";
$scope.say = function(){
alert( $scope.name +" is a"+ $scope.sex )
}
}])
myModule.directive("myDirective", function(){
return {
restrict: "EA",
scope: {
myName: "@",
mySex: "=",
getName: "&"
},
template: "<input type='text' ng-model='myName' /><br/>"+
"<input type='text' ng-model='mySex' /><br/>"+
"<input type='button' ng-click='getName()' value='点击执行子域的say方法' />"
}
}) </script>
@:单向引用父域的值,传递的值必须是字符串且在指令里引用时必须加上{{}};
=:双向绑定子域和父域;
&:单向绑定父域,以便在其中运行函数
总结:scope是指令与指令之间交互,作用域之间数据互通的重要途径,是很常用也很重要的基础知识,务必要掌握。
作者:古德God
出处:http://www.cnblogs.com/wangmeijian
本文版权归作者和博客园所有,欢迎转载,转载请标明出处。
如果您觉得本篇博文对您有所收获,请点击右下角的 [推荐],谢谢!
AngularJs指令配置参数scope详解的更多相关文章
- angularjs 指令(directive)详解(1)
原文地址 什么是directive?我们先来看一下官方的解释: At a high level, directives are markers on a DOM element (such as an ...
- angularjs 指令(directive)详解(2)
原文地址 上一篇我们说到了transclude,那么,我们现在继续讲解之后的内容. 9.scope 可选参数,默认值为false.取值: false - 在这个directive里不会创建新的scop ...
- 转载 《AngularJS》5个实例详解Directive(指令)机制
<AngularJS>5个实例详解Directive(指令)机制 大漠穷秋 本文整理并扩展了<AngularJS>这本书第六章里面的内容,此书近期即将由电子工业出版社出版,敬请 ...
- CentOS 6.3下Samba服务器的安装与配置方法(图文详解)
这篇文章主要介绍了CentOS 6.3下Samba服务器的安装与配置方法(图文详解),需要的朋友可以参考下 一.简介 Samba是一个能让Linux系统应用Microsoft网络通讯协议的软件, ...
- Angular2 内置指令 NgFor 和 NgIf 详解
http://www.jb51.net/article/89781.htm 在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个 ...
- MYSQL服务器my.cnf配置文档详解
MYSQL服务器my.cnf配置文档详解 硬件:内存16G [client] port = 3306 socket = /data/3306/mysql.sock [mysql] no-auto-re ...
- AngularJS select中ngOptions用法详解
AngularJS select中ngOptions用法详解 一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...
- Eclipse进行C/C++开发——Eclipse+CDT+MinGW的配置与使用详解
http://hi.baidu.com/ltb6w/item/3a51f11926fda60ce75c361d Eclipse进行C/C++开发——Eclipse+CDT+MinGW的配置与使用详解 ...
- OpenVPN下载、安装、配置及使用详解
OpenVPN下载.安装.配置及使用详解 OpenVPN简介 OpenVPN是一个用于创建虚拟专用网络(Virtual Private Network)加密通道的免费开源软件.使用OpenVPN可 ...
随机推荐
- bzoj 4328 始祖鸟
4328: JSOI2012 始祖鸟 Time Limit: 10 Sec Memory Limit: 256 MBSec Special JudgeSubmit: 76 Solved: 52[ ...
- chessboard
题意:n*n的矩阵,m次赋值一个子矩阵为c,最后输出答案. n<=1e3 m<=1e5 解:倒序处理. 拆行处理. 每行内并查集维护未被赋值的地方. 这样每个地方最多被赋值一次,每次修改要 ...
- 3分钟读懂移动端rem使用方法
1.为什么要用rem 博客很久没写了,原因很简单. 最近接手了一个项目,要同时做PC和移动端的页面,之前没接触过,但毕竟给钱的是大爷,所以还是硬着头皮上了. 移动端最麻烦的是什么? 不同分辨率适配! ...
- Java基础-SSM之mybatis一对多和多对一关系映射
Java基础-SSM之mybatis一对多和多对一关系映射 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.准备测试环境(创建数据库表) 1>.创建customers表: ...
- 分布式锁--Redis小试牛刀
参考文章: Redis分布式锁的正确实现方式 分布式锁看这篇就够了 在这两篇文章的指引下亲测 Redis分布式锁 引言 分布式系统一定会存在CAP权衡问题,所以才会出现分布式锁 什么是CAP理论? 为 ...
- 分布式监控工具Ganglia 介绍 与 集群部署.
如果你目的很明确就是冲着标题来的,不爱看我唠叨,请直接进入第二个分割线之后的内容. 其实之前就是有做Swift监控平台的打算的,但是因为没什么硬性需求么,也不要紧的,就一直搁置了.最近实验室来了个大二 ...
- iOS手势UIGestureRecognizer的使用及手势冲突的解决办法【转】
转自:iOS开发中的手势体系——UIGestureRecognizer分析及其子类的使用 关于手势的一篇很好的帖子,转载过来免得丢失.你可能最感兴趣的是手势间的互斥处理,那么就搜索 4.手势间的互斥处 ...
- 普通用户修改root密码【转】
在普通用户下修改root用户密码 1 从普通用户切换到root用户 sudo -s 再输入密码.2 输入passwd ,会提醒你输入当前用户密码,验证后会提醒你输入root用户密码.3 切换到ro ...
- tomcat报错catalina.sh: line 401: /usr/java/jdk1.7.52/bin/java: No such file or directory
将生产服务器的Tomcat目录打包过来后解压后,启动Tomcat后,发现如下问题: # ./shutdown.sh Using CATALINA_BASE: /usr/local/tomcat ...
- hadoop控制map个数(转)
原文链接:https://blog.csdn.net/lylcore/article/details/9136555 hadooop提供了一个设置map个数的参数mapred.map.task ...