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可 ...
随机推荐
- C++并发编程之std::async(), std::future, std::promise, std::packaged_task
c++11中增加了线程,使得我们可以非常方便的创建线程,它的基本用法是这样的: void f(int n); std::thread t(f, n + 1); t.join(); 但是线程毕竟是属于比 ...
- UiAutomator2.0入门
总是听说UiAutomator这个框架,但从来没有使用过.找了篇入门,实践一下.实践之后感觉,uiautomator写测试代码,还是有点费劲.接口名比较多,比较长.网易的atx里使用的uiautoma ...
- excel根据一列关键字将多个表格中所需列合并
VLOOKUP(lookup_value, table_array, col_index_num, [range_lookup]) lookup_value要查询的列 table_array第一列是被 ...
- [转载]五理由 .NET开发者应该关注HTML 5
http://developer.51cto.com/art/201107/275039.htm
- HDU 1308 What Day Is It?(模拟题)
解题报告:输入一个年月日,让你求出那一天是星期几,但是做这题之前必须先了解一点历史.首先在1582年之前,判断是否是闰年的标准是只要能被四整除就是闰年, 然后在1752年9月2号的后的11天被抹去了, ...
- Caffe 碎碎念
Window Data Layer window data layer 的数据是存在硬盘上的图片, 需要在一个txt里指定用于训练或测试的图片以及bounding box, bounding box ...
- artDialog学习之旅(二)之扩展方法详解
名称 描述 核心方法 art.dialog.top 获取artDialog可用最高层window对象.这与直接使用window.top不同,它能排除artDialog对象不存在已经或者顶层页面为框架集 ...
- Python 入门基础6 --字符编码、文件操作1
今日内容: 1.字符编码 2.字符与字节 3.文件操作 一.字符编码 了解: cpu:将数据渲染给用户 内存:临时存放数据,断电消失 硬盘:永久存放数据,断电后不消失 1.1 什么是编码? 人类能够识 ...
- os_cpu_a.asm
在OS_CPU_A.ASM中,定义了开.关中断的方法,在uC/OS-II系统中有三种方法可以实现中断开关,而ARM只适用于模式三,即使用一个局部变量,在中断进入之间保存CPU状态,退出时候再恢复状态. ...
- 【转载】maven pom详解(2)
setting.xml主要用于配置maven的运行环境等一系列通用的属性,是全局级别的配置文件:而pom.xml主要描述了项目的maven坐标,依赖关系,开发者需要遵循的规则,缺陷管理系统,组织和li ...