angularJS自定義directive之帶參方法傳遞詳解
更新時(shí)間：2018年10月09日 09:18:54 作者：螞蟻沖鋒隊(duì)
今天小編就為大家分享一篇angularJS自定義directive之帶參方法傳遞詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
如下所示：
//自定義指令 "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調(diào)用
<my-email to-dir="廣東中山" from-name="海南?？? send-email="send(msg)"/>
功能：點(diǎn)擊【提交】后，將自定義指令myEmail中textarea元素的內(nèi)容傳遞給控制器中的send()方法。
關(guān)鍵點(diǎn)：模板e(cuò)mail.html中的ng-click="sendEmail({msg:content})" 參數(shù){msg:content}必須是一個(gè)鍵值對(duì)，鍵為：方法參數(shù)名 值為：傳遞的內(nèi)容
以上這篇angularJS自定義directive之帶參方法傳遞詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS中$watch和$timeout的使用示例
這篇文章給大家介紹了AngularJS中$watch和$timeout的使用例子，通過(guò)示例代碼相信更能讓大家理解，有需要的朋友們下面來(lái)一起看看吧。2016-09-09
詳解Monaco?Editor中的Keybinding機(jī)制
這篇文章主要為大家介紹了詳解Monaco?Editor中的Keybinding機(jī)制詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
AngularJS基礎(chǔ) ng-open 指令簡(jiǎn)單實(shí)例
本文主要介紹AngularJS ng-open 指令,這里幫大家整理了ng-open指令的基本資料,有需要的小伙伴可以參考下2016-08-08
Angular4開(kāi)發(fā)解決跨域問(wèn)題詳解
本篇文章主要介紹了Angular4開(kāi)發(fā)解決跨域問(wèn)題詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
AngularJS下對(duì)數(shù)組的對(duì)比分析
下面小編就為大家?guī)?lái)一篇AngularJS下對(duì)數(shù)組的對(duì)比分析。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
這篇文章主要介紹了AngularJS中的promise用法,結(jié)合實(shí)例形式分析了AngularJS異步處理模式promise具體功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-05-05
angularjs過(guò)濾器--filter與ng-repeat配合有奇效
本篇文章主要介紹了angularjs過(guò)濾器-filter與ng-repeat的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
本篇文章主要介紹了Angular中的生命周期鉤子的理解，詳細(xì)的介紹了生命周期鉤子和主要的生命周期鉤子，有興趣的可以了解一下2017-07-07
這篇文章主要為大家介紹了Angular應(yīng)用懶加載模塊配置管理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
Angular實(shí)現(xiàn)類似博客評(píng)論的遞歸顯示及獲取回復(fù)評(píng)論的數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于Angular如何實(shí)現(xiàn)類似博客評(píng)論的遞歸顯示及獲取回復(fù)評(píng)論的數(shù)據(jù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11