AngularJS 指令绑定 & 简介
指令中独立scope 的 & 官方说明:
1. 绑定表达式
2. 经常用来绑定回调函数
诡异的地方在于,这个 & 某次听人说在子组件中是不能传值给callback的,好奇查了一下官方文档,更加诡异了:
We saw earlier how to use
=attrin thescopeoption, but in the above example, we're using&attrinstead. 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
xin the dialog, the directive'sclosefunction is called, thanks tong-click.This call tocloseon the isolated scope actually evaluates the expressionhideDialog(message)in the context of the original scope, thus runningController'shideDialogfunction.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
hideDialogfunction 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 variablemessagewill be available within theon-closeexpression.
文档中的例子见下链接:
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的指令是一大特色 ...
随机推荐
- Hibernate 中 load() 方法导致的 noSession 异常
之所以要写这个,是因为最近碰到了一个延迟加载的 load() 导致出现 noSession 的异常. 下面第三种方式解决这个问题需要用到一个本地线程的对象,也就是 ThreadLocal 类,之前写过 ...
- break,continue,return 的区别
(1)break 跳出当前循环体 (2)continue 跳过当前循环体continue后面的代码,继续执行下一个循环 (3)return 和循环没关系,就是跳出该函数
- 【容斥原理,莫比乌斯反演】用容斥替代莫比乌斯反演第二种形式解决gcd统计问题
名字虽然很长.但是其实很简单,对于这一类问题基本上就是看你能不能把统计的公式搞出来(这时候需要一个会推公式的队友) 来源于某次cf的一道题,盼望上紫的我让潘学姐帮我代打一道题,她看了看跟我说了题解,用 ...
- 【基础】一个简单的MVC实例及故障排除
Controller: public ActionResult Index() { string setting = "ApplicationServices"; var conn ...
- POJ.3087 Shuffle'm Up (模拟)
POJ.3087 Shuffle'm Up (模拟) 题意分析 给定两个长度为len的字符串s1和s2, 接着给出一个长度为len*2的字符串s12. 将字符串s1和s2通过一定的变换变成s12,找到 ...
- 51nod 1952 栈(单调队列)
用deque实时维护栈的情况. 数加入栈顶部,删掉栈顶部的数,相当于加入一个数,删掉最早出现的数,每次求最大值,这个直接记录一下就好了. 数加入栈底部,删掉栈顶部的数,相当于加入一个数,删掉最晚出现的 ...
- 【bzoj1502】月下柠檬树
Portal -->bzoj1502 Solution 额其实说实在这题我一开始卡在了..这个阴影长啥样上QwQ 首先因为是平行光线然后投影到了一个水平面上所以这个投影一定是..若干个圆再加上这 ...
- python基础----迭代器、生成器、协程函数及应用(面向过程实例)
一.什么是迭代器协议 1.迭代器协议是指:对象必须提供一个next方法,执行该方法要么返回迭代中的下一项,要么就引起一个StopIteration异常,以终止迭代 (只能往后走不能往前退) 2.可迭代 ...
- Centos7.3 安装 OpenCV3.3.0
一开始会出现这个错误: CMake Error at CMakeLists.txt: (message): FATAL: In-source builds are not allowed. You s ...
- Idea安装findbugs插件,以及findbugs安装find security bugs插件
第一:先讲述Idea怎么安装findbugs插件 具体操作如下面的图所示: 然后就可以安装findbugs 第二:findbugs怎么安装find security bugs这个find bugs的插 ...