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. Sublime Text Ctags 安装、使用、快捷键

    安装ctags应用程序. 1.到CTags的官方网站下载最新版本,将解压后的ctags.exe放到系统环境变量的搜索路径中.一般是C:\windows\system32. 如果你想放到其他文件夹中,记 ...

  2. spring cloud微服务架构 服务提供者和服务消费者

    服务提供者和服务消费者 下面这张表格,简单描述了服务提供者/消费者是什么:   | 名词 | 概念 | | ----- | ----------------------- | | 服务提供者 | 服务 ...

  3. Spring cloud 微服务架构 Eureka篇

    1 服务发现 ## 关于服务发现 在微服务架构中,服务发现(Service Discovery)是关键原则之一.手动配置每个客户端或某种形式的约定是很难做的,并且很脆弱.Spring Cloud提供了 ...

  4. 深入分析Java Web技术内幕

    深入web请求过程 发起一个http请求的过程就是建立一个socket通信的过程 HTTPClient是一个开源的实现了http请求的工具包 深入分析java I/O的工作机制 深入分析java We ...

  5. chrome 隐藏技能之 base64 图片转换

    有时候我们要转换图片为base64,或者将base64转回图片,可能都需要找一些在线工具或者软件类型的工具才行.当然 chrome 也算是软件,但是好在做前端的都有 chrome.好了,来看下简单的例 ...

  6. AngularJS入门基础——作用域

    作用域$scope是构成AngularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它是非常重要的. $scope对像是定义应用业务逻辑,控制器方法和视图属性的地方.作用域是视图和控制器之间的 ...

  7. 关于 xcode5 的no matching provisioning profiles found

    CHENYILONG Blog 关于 xcode5 的no matching provisioning prof- about the question in xcode5 "no matc ...

  8. 爬虫笔记之自如房屋价格图片识别(价格字段css背景图片偏移显示)

    一.前言 自如房屋详情页的价格字段用图片显示,特此破解一下以丰富一下爬虫笔记系列博文集. 二.分析 & 实现 先打开一个房屋详情页观察一下: 网页的源代码中没有直接显示价格字段,价格的显示是使 ...

  9. Expression Tree Build

    The structure of Expression Tree is a binary tree to evaluate certain expressions.All leaves of the ...

  10. 协议中UART的两种模式 【转】

    转自:http://wjf88223.blog.163.com/blog/static/3516800120104179327286/ ^^…… 协议栈中UART有两种模式:1.中断2.DMA 对于这 ...