AngularJS 指令绑定 & 简介
指令中独立scope 的 & 官方说明:
1. 绑定表达式
2. 经常用来绑定回调函数
诡异的地方在于,这个 & 某次听人说在子组件中是不能传值给callback的,好奇查了一下官方文档,更加诡异了:
We saw earlier how to use
=attr
in thescope
option, but in the above example, we're using&attr
instead. The&
binding allows a directive to trigger evaluation of an expression in the context of the original scope, at a specific time. Any legal expression is allowed, including an expression which contains a function call. Because of this,&
bindings are ideal for binding callback functions to directive behaviors.When the user clicks the
x
in the dialog, the directive'sclose
function is called, thanks tong-click.
This call toclose
on the isolated scope actually evaluates the expressionhideDialog(message)
in the context of the original scope, thus runningController
'shideDialog
function.Often it's desirable to pass data from the isolate scope via an expression to the parent scope, this can be done by passing a map of local variable names and values into the expression wrapper function. For example, the
hideDialog
function takes a message to display when the dialog is hidden. This is specified in the directive by callingclose({message: 'closing for now'})
. Then the local variablemessage
will be available within theon-close
expression.
文档中的例子见下链接:
https://plnkr.co/edit/QRCZgkuBqmNEZfRYv9yh?p=preview
- 原文中加粗的地方说明是可以在独立 scope 的指令中传值给父级 scope 的
- 红色部分就是诡异之处:传值可以通过、传一个对象(用key表示本地变量)到包裹函数中,父级 scope 就能接收到这个对象中的 value
也可以看这个例子:
总结:
1. 有点像 ES6 中的解构赋值(Destructuring Assignment)
2. 要想通过 & 给父级传值, 就要传对象,对象里面包含需要传的值的键值对
3. 最后传给 & 的表达式上还有声明 传的这个值的名称(类似形参的形式)
注: 上面的总结的颜色和原文对应
参考文档:
AngularJS 指令绑定 & 简介的更多相关文章
- angularjs 指令—— 绑定策略(@、=、&)
angularjs 指令—— 绑定策略(@.=.&) 引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到 ...
- AngularJS指令
1. AngularJS指令的特点: AngularJS通过被称为指令的新属性来扩展HTML,指令的前缀为ng-. AngularJS通过内置的指令来为应用添加功能. AngularJS允许你自定义指 ...
- AngularJS 指令
AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令 ng-app 指令定义了 AngularJS 应用程序的 根元素. ng-app 指 ...
- angularjs指令(二)
最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 angula ...
- angularJs指令执行的机制==大概的三个阶段
第一阶段:加载阶段 angularJs要运行的话,需要去等待angular.js加载完成,加载完之后呢,angular就会去查找到ng-app这个指令,ng-app在每个应用里面只能出现一次, 它也就 ...
- AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...
- AngularJs指令(一)
AngularJs应用现在越来越流行了,谷歌都与微软合作支持AngularJS2.0,这是要逆天了,说明AngularJs将来大势所趋.最近想跳槽,又重新拾起了AngluarJs(之前由于缺少项目应用 ...
- AngularJS指令进阶 – ngModelController详解
AngularJS指令进阶 – ngModelController详解 在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我 ...
- 不用搭环境的10分钟AngularJS指令简易入门01(含例子)
不用搭环境的10分钟AngularJS指令简易入门01(含例子) `#不用搭环境系列AngularJS教程01,前端新手也可以轻松入坑~阅读本文大概需要10分钟~` AngularJS的指令是一大特色 ...
随机推荐
- django-registration中的问题
https://github.com/ubernostrum/django-registration.git https://django-registration.readthedocs.io/en ...
- perf的统计模式: 突破口: x86_perf_event_update
之前一直以为perf的统计模式也是通过中断出发来的,于是会在中断处理函数中做处理,但是如果perf是统计模式,那么perf的寄存器就不会是溢出的模式了,这个时候,就没有pmu的中断发生,所以很奇怪呢, ...
- jenkins 配置git 学习
由于Jenkins没有默认安装Git插件,需要Git库同步时候,需要手动选择安装git插件 在“系统管理”->“管理插件”中找到,“可选插件”选项卡.“过滤“(一个名为过滤的搜素窗口)中可以用键 ...
- Codeforces 627D Preorder Test(二分+树形DP)
题意:给出一棵无根树,每个节点有一个权值,现在要让dfs序的前k个结点的最小值最大,求出这个值. 考虑二分答案,把>=答案的点标记为1,<答案的点标记为0,现在的任务时使得dfs序的前k个 ...
- BZOJ 1189 紧急疏散(二分+最大流)
求出所有人撤离的最短时间.由于每扇门只能通过一次,所以不能简单用bfs来搞. 显然答案是有单调性的,考虑二分,问题变成了判断时间x所有人能不能撤离. 考虑最大流.对于每扇门,每个时间通过的人数最多为1 ...
- 洛谷P2894[USACO08FEB]酒店Hotel(线段树)
问题描述 奶牛们最近的旅游计划,是到苏必利尔湖畔,享受那里的湖光山色,以及明媚的阳光.作为整个旅游的策划者和负责人,贝茜选择在湖边的一家著名的旅馆住宿.这个巨大的旅馆一共有N (1 <= N & ...
- bzoj4798[CEOI2015] Calvinball championship
这年头,n方跑1万的题已经不多了... 题意 bzoj4798 不知道怎么叙述这个题意... 分析 如果某个序列字典序小于给定的序列,我们不妨考虑从左到右第一个小于给定的序列的位置,并枚举这个位置的数 ...
- BZOJ3591 最长上升子序列(状压dp)
之前听说过一种dp套dp的trick,大致是用另一个dp过程中用到的一些东西作为该dp的状态.这个题比较类似. 考虑求LIS时用到的单调队列.设f[S]为所选取集合为S的方案数,其中在单调队列内的标2 ...
- Flash平台的分析与RIA的趋势
10月3号,Flash Player 11 和 AIR 3.0正式提供下载,一片安静.最近这两年来,关于Flash的新闻一向是以负面为主,先是 Silverlight 的挑战,然后是 iphone和i ...
- codeforces gym 100952 A B C D E F G H I J
gym 100952 A #include <iostream> #include<cstdio> #include<cmath> #include<cstr ...