快捷導(dǎo)航

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)文章

Angular Module聲明和獲取重載實(shí)例代碼
這篇文章主要介紹了Angular Module聲明和獲取重載實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2016-09-09
angularjs通過(guò)過(guò)濾器返回超鏈接的方法
這篇文章主要介紹了angularjs通過(guò)過(guò)濾器返回超鏈接的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
Angularjs過(guò)濾器實(shí)現(xiàn)動(dòng)態(tài)搜索與排序功能示例
這篇文章主要介紹了Angularjs過(guò)濾器實(shí)現(xiàn)動(dòng)態(tài)搜索與排序功能,涉及AngularJS過(guò)濾器相關(guān)搜索、查詢、排序操作技巧,需要的朋友可以參考下
2017-12-12
Angular將填入表單的數(shù)據(jù)渲染到表格的方法
這篇文章主要介紹了Angular將填入表單的數(shù)據(jù)渲染到表格的方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-09-09
AngularJs中route的使用方法和配置
angular是Google開(kāi)發(fā)的一個(gè)單頁(yè)面應(yīng)用框架,是現(xiàn)在比較主流的單頁(yè)面應(yīng)用框架之一，下面通過(guò)本文給大家介紹AngularJs中route的使用方法和配置，感興趣的朋友一起學(xué)習(xí)吧
2016-02-02
AngularJS過(guò)濾器filter用法分析
這篇文章主要介紹了AngularJS過(guò)濾器filter用法,結(jié)合實(shí)例形式分析了過(guò)濾器filter的功能、分類、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2016-12-12
淺談Angular HttpClient簡(jiǎn)單入門
本篇文章主要介紹了淺談Angular HttpClient 簡(jiǎn)單入門，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
Angularjs中ng-repeat-start與ng-repeat-end的用法實(shí)例介紹
這篇文章主要給大家介紹了Angularjs中ng-repeat-start與ng-repeat-end的用法，文章開(kāi)始先進(jìn)行了簡(jiǎn)單的介紹，而后通過(guò)完整的實(shí)例代碼詳細(xì)給大家介紹這兩者的用法，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。
2016-12-12
Webpack 實(shí)現(xiàn) AngularJS 的延遲加載
這篇文章主要介紹了Webpack 實(shí)現(xiàn) AngularJS 的延遲加載的相關(guān)資料,需要的朋友可以參考下
2016-03-03
AngularJS基礎(chǔ)教程之簡(jiǎn)單介紹
本教程旨在幫助你盡可能快速而有效地學(xué)習(xí)AngularJS。通過(guò)該教程你會(huì)學(xué)習(xí)到AngularJS的一些基本特性，例如指令、表達(dá)式、過(guò)濾器、模塊和控制器等。以及其它所有你需要知道的有關(guān)AngularJS的東西，如事件、DOM節(jié)點(diǎn)、表單、用戶輸入、數(shù)據(jù)驗(yàn)證、Http對(duì)象等。
2015-09-09