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详解的更多相关文章

  1. angularjs 指令(directive)详解(1)

    原文地址 什么是directive?我们先来看一下官方的解释: At a high level, directives are markers on a DOM element (such as an ...

  2. angularjs 指令(directive)详解(2)

    原文地址 上一篇我们说到了transclude,那么,我们现在继续讲解之后的内容. 9.scope 可选参数,默认值为false.取值: false - 在这个directive里不会创建新的scop ...

  3. 转载 《AngularJS》5个实例详解Directive(指令)机制

    <AngularJS>5个实例详解Directive(指令)机制 大漠穷秋 本文整理并扩展了<AngularJS>这本书第六章里面的内容,此书近期即将由电子工业出版社出版,敬请 ...

  4. CentOS 6.3下Samba服务器的安装与配置方法(图文详解)

    这篇文章主要介绍了CentOS 6.3下Samba服务器的安装与配置方法(图文详解),需要的朋友可以参考下   一.简介  Samba是一个能让Linux系统应用Microsoft网络通讯协议的软件, ...

  5. Angular2 内置指令 NgFor 和 NgIf 详解

    http://www.jb51.net/article/89781.htm 在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个 ...

  6. MYSQL服务器my.cnf配置文档详解

    MYSQL服务器my.cnf配置文档详解 硬件:内存16G [client] port = 3306 socket = /data/3306/mysql.sock [mysql] no-auto-re ...

  7. AngularJS select中ngOptions用法详解

    AngularJS select中ngOptions用法详解   一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...

  8. Eclipse进行C/C++开发——Eclipse+CDT+MinGW的配置与使用详解

    http://hi.baidu.com/ltb6w/item/3a51f11926fda60ce75c361d Eclipse进行C/C++开发——Eclipse+CDT+MinGW的配置与使用详解 ...

  9. OpenVPN下载、安装、配置及使用详解

    OpenVPN下载.安装.配置及使用详解   OpenVPN简介 OpenVPN是一个用于创建虚拟专用网络(Virtual Private Network)加密通道的免费开源软件.使用OpenVPN可 ...

随机推荐

  1. C语言复习---获取矩阵的对角和

    #include <stdio.h> #include <stdlib.h> #include <math.h> #define MAX 5 int main() ...

  2. SpringMVC关于ajax提交400错误(后台获取为null)

    400错误有三种情况 1:请求的数据量过大,不过这种情况一般很少见. 2:请求的data参数有误,确保每一个参数都能请求到. 注释:之前小白出现400错误,后台获取参数为null是因为第三种情况,经过 ...

  3. Carmichael Numbers (Uva No.10006) -- 快速幂运算_埃氏筛法_打表

    #include <cstdio> #include <iostream> #include <algorithm> #include <cmath> ...

  4. Lua程序设计(三)面向对象实现一个简单的类

    1.Lua面向对象实现步骤 ①创建一个全局表(称之为元表) ②设置这个元表的__index值(值通常为元表自己,这样就能通过__index查找到对应的属性和方法)__index 赋值其实是一个func ...

  5. Linux(Debian)软件安装

    # 配置/etc/apt/sources.list 通过root权限修改/etc/apt/sources.list $ su #输入密码进入root权限 $ chmod 0666 /etc/apt/s ...

  6. Javascript非构造函数的继承

    一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Chinese = { nation:'中国' }; 还有一个对象,叫做&qu ...

  7. OnContextMenu事件(转)

    用oncontextmenu事件单禁用右键菜单 一个页面中,BODY中用oncontextmenu='return false'来取消鼠标右键:在JS中设置oncontextmenu='return ...

  8. bzoj3029 守卫者的挑战 (多维dp)

    题面: 打开了黑魔法师Vani的大门,队员们在迷宫般的路上漫无目的地搜寻着关押applepi的监狱的所在地.突然,眼前一道亮光闪过."我,Nizem,是黑魔法圣殿的守卫者.如果你能通过我的挑 ...

  9. JDK1.8源码hashMap

    一.概念 允许key为null,value为null:线程不安全:不保证映射的顺序:迭代 collection 视图所需的时间与 HashMap 实例的“容量”(桶的数量)及其大小(键-值映射关系数) ...

  10. nginx tomcat 自动部署python脚本【转】

    #!/usr/bin/env python #--coding:utf8-- import sys,subprocess,os,datetime,paramiko,re local_path='/ho ...