angularJS自定義directive之帶參方法傳遞詳解

更新時間：2018年10月09日 09:18:54 作者：螞蟻沖鋒隊

今天小編就為大家分享一篇angularJS自定義directive之帶參方法傳遞詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

如下所示：

//自定義指令 "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)"/>

功能：點擊【提交】后，將自定義指令myEmail中textarea元素的內(nèi)容傳遞給控制器中的send()方法。

關(guān)鍵點：模板email.html中的ng-click="sendEmail({msg:content})" 參數(shù){msg:content}必須是一個鍵值對，鍵為：方法參數(shù)名值為：傳遞的內(nèi)容

以上這篇angularJS自定義directive之帶參方法傳遞詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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