angularJS自定义directive之带参方法传递详解


Posted in Javascript onOctober 09, 2018

如下所示:

//自定义指令 "myEmail"

grgApp.directive("myEmail",function(){
return{
restrict:'AE',
scope:{toDir:'@', 
fromName:'@', 
sendEmail:'&'
},
templateUrl:'/htmls/main/html/custom/email.html',}
});

//控制器中的方法

$scope.send=function(msg){ 
alert("send email! msg: "+msg);
 }
 
//email.html

<div style="width: 100%;height: 100%;color: white;font-size: 0.8rem;">
<label style="width: 100%;height: 15%;" ng-bind="toDir"></label>
<label style="width: 100%;height: 15%;" ng-bind="fromName"></label>
<textarea style="width: 100%;height: 25%;color: black;" ng-model="content"></textarea>
<button style="width: 10%;height: 15%;color: black;" ng-click="sendEmail({msg:content})">提交</button>
</div>

//html调用

<my-email to-dir="广东中山" from-name="海南海口" send-email="send(msg)"/>

功能:点击【提交】后,将自定义指令myEmail中textarea元素的内容传递给控制器中的send()方法。

关键点:模板email.html中的ng-click="sendEmail({msg:content})" 参数{msg:content}必须是一个键值对,键为:方法参数名 值为:传递的内容

以上这篇angularJS自定义directive之带参方法传递详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery $.ajax相关用法分享
Mar 16 Javascript
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
javascript代码实现简易计算器
Jan 25 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 #Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 #Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 #Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 #Javascript
Vue中的$set的使用实例代码
Oct 08 #Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 #Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 #Javascript
You might like
浅谈COOKIE和SESSION区别
2015/07/19 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
javascript css styleFloat和cssFloat
2010/03/15 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
英文简历中的自我评价用语
2013/12/09 职场文书
初中女生自我鉴定
2013/12/19 职场文书
企业申诉管理制度
2014/01/30 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
离婚协议书怎么写
2015/01/26 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
2019大学竞选班长发言稿
2019/06/27 职场文书
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js