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 相关文章推荐
window.open被浏览器拦截后的自定义提示效果代码
Nov 19 Javascript
jquery select操作的日期联动实现代码
Dec 06 Javascript
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
Element InputNumber 计数器的实现示例
Aug 03 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
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
js右键菜单效果代码
2007/07/21 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
Python探索之Metaclass初步了解
2017/10/28 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
python判断无向图环是否存在的示例
2019/11/22 Python
实现Python与STM32通信方式
2019/12/18 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
基层工作经历证明
2014/01/13 职场文书
关于保护环境的标语
2014/06/09 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
幼儿园国培研修日志
2015/11/13 职场文书