angular指令中的scope的详解

scope参数值

scope参数是可选的，默认值为false，可选true、对象{}；false：共享父域true：继承父域，且新建独立作用域对象{}：不继承父域，且新建独立作用域

scope参数false

本质：子域与父域共享作用域。
特点：父域修改parentName的同时，指令绑定的parentName的元素会被刷新。
反之，指令内部parentName被修改时，父域的parentName同样会被刷新。

scope参数true

本质：子域继承父域，并建立独立作用域。
特点：1、在指令已声明parentName的情况下，父域parentName变更，指令中parentName不会发生变化。指令在true参数下，建立了的scope，独立并隔离与父控制器的scope。反之，指令中parentName变更，父域也不会发生变化。2、在指令未声明parentName的情况下，父域的parentName变更，指令中parentName也会刷新这种情况很多时候会被忽略，指令的scope没有声明对象时，其元素绑定的仍然是父域的对象。但，一旦指令中Input变更了，对应的独立scope也会自动声明该绑定对象，这就回到了第1种情况。然而，指令中parentName变更，父域是不会变化的；3、在指令已声明parentName的情况下，在指令中监听父域parentName的变化无效。但监听子域parentName的变化有效独立子域scope，只能监听自己的，不能监听父域的。但通过 $scope.$parent可以监听父域。4、在指令未声明parentName的情况下 ，在指令中监听父域parentName的变化有效。

scope参数{}

本质：子域不继承父域，并建立独立作用域。
特点：1、当scope对象为空对象时，无论是父域parentName，还是指令子域parentName发生变更，都不会影响到对方。
原理很清楚，就是指令建立的独立作用域，与父域是完全隔离的。2、当scope对象为非空对象时，指令会将该对象处理成子域scope的扩展属性。而父域与子域之间传递数据的任务，就是可以通过这块扩展属性完成@：符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域的变量。@ 是单向绑定本地作用域=：可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。&：符号可以对父级作用域进行绑定，以便在其中运行函数，&对应的attrName必须以on-开头<child-c on-say="say('i m ' + name)"></child-c>scope: {          onSay: '&',}app.controller('parentCtrl', function ($scope) {$scope.say = function (sth) {alert(sth);};})

转载于:https://www.cnblogs.com/hyhufei/p/7417395.html

angular指令中的scope的详解相关推荐

ir指令、立即数的作用_ARM指令中使用立即数详解
arm 指令立即数 (二) 在 ARM 数据处理指令中 , 当参与操作的第二操作数为立即数时 , 每个立即数都是采用一个 8 位的常数循环右移偶数位而间接得到 , 其中循环右移的位数有一个 4 ...
maven中强大的scope标签详解
maven中强大的scope标签详解本文目的接上一篇maven的版本号version的总结及理解当我在封装工具jar包的时候,发现有些依赖,是一定要在工具代码里使用的,比如我做的工具包里 ...
JavaScript 面试中常见算法问题详解
JavaScript 面试中常见算法问题详解,翻译自 https://github.com/kennymkchan/interview-questions-in-javascript.下文提到的很多问 ...
JSP 中EL表达式用法详解
EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${ ...
JScript中的条件注释详解（转载自网络）
JScript中的条件注释详解-转载这篇文章主要介绍了JScript中的条件注释详解,本文讲解了@cc_on.@if.@set.@_win32.@_win16.@_mac等条件注释语句及可用于条件编 ...
Fedora 中的 Yum 命令详解
http://pengjiayou.com/blog/yum-fedora-in-order-detailed-explanation 总所周知,Redhat和Fedora的软件安装命令是rpm,但 ...
linux系统里route -n不起作用,Linux系统中traceroute命令使用详解
Linux系统中traceroute命令可以追踪到网络数据包的路由途径.下面由学习啦小编为大家整理了linux系统中traceroute命令使用详解,希望对大家有帮助! Linux系统中tracero ...
USB CCID类协议中的APDU命令详解
出处:http://blog.chinaunix.net/uid-29124653-id-4573075.html 原文地址:USB CCID类协议中的APDU命令详解作者:jeffasdasd 最 ...
西门子S7-1200PLC PID功能指令介绍及组态步骤详解
西门子S7-1200PLC PID功能指令介绍及组态步骤详解 S7-1200 PID Compact V2 指令介绍 PID 指令块的参数分为两部分,输入参数与输出参数.其指令块的视图分为扩展视图与集 ...
dapper mysql 预处理_.Net Core中Dapper的使用详解
Dapper 是一个轻量级ORM框架,在项目中如果对性能比较看中,Dapper是一个不错的选择.接下来我们就来看看如何在项目中使用Dapper. 1.安装Dapper 这里直接使用Nuget安装. 安 ...

angular指令中的scope的详解

scope参数值

scope参数false

scope参数true

scope参数{}

angular指令中的scope的详解相关推荐

最新文章

热门文章