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语言复习---获取矩阵的对角和
#include <stdio.h> #include <stdlib.h> #include <math.h> #define MAX 5 int main() ...
- SpringMVC关于ajax提交400错误(后台获取为null)
400错误有三种情况 1:请求的数据量过大,不过这种情况一般很少见. 2:请求的data参数有误,确保每一个参数都能请求到. 注释:之前小白出现400错误,后台获取参数为null是因为第三种情况,经过 ...
- Carmichael Numbers (Uva No.10006) -- 快速幂运算_埃氏筛法_打表
#include <cstdio> #include <iostream> #include <algorithm> #include <cmath> ...
- Lua程序设计(三)面向对象实现一个简单的类
1.Lua面向对象实现步骤 ①创建一个全局表(称之为元表) ②设置这个元表的__index值(值通常为元表自己,这样就能通过__index查找到对应的属性和方法)__index 赋值其实是一个func ...
- Linux(Debian)软件安装
# 配置/etc/apt/sources.list 通过root权限修改/etc/apt/sources.list $ su #输入密码进入root权限 $ chmod 0666 /etc/apt/s ...
- Javascript非构造函数的继承
一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Chinese = { nation:'中国' }; 还有一个对象,叫做&qu ...
- OnContextMenu事件(转)
用oncontextmenu事件单禁用右键菜单 一个页面中,BODY中用oncontextmenu='return false'来取消鼠标右键:在JS中设置oncontextmenu='return ...
- bzoj3029 守卫者的挑战 (多维dp)
题面: 打开了黑魔法师Vani的大门,队员们在迷宫般的路上漫无目的地搜寻着关押applepi的监狱的所在地.突然,眼前一道亮光闪过."我,Nizem,是黑魔法圣殿的守卫者.如果你能通过我的挑 ...
- JDK1.8源码hashMap
一.概念 允许key为null,value为null:线程不安全:不保证映射的顺序:迭代 collection 视图所需的时间与 HashMap 实例的“容量”(桶的数量)及其大小(键-值映射关系数) ...
- nginx tomcat 自动部署python脚本【转】
#!/usr/bin/env python #--coding:utf8-- import sys,subprocess,os,datetime,paramiko,re local_path='/ho ...