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聲明和獲取重載實例代碼的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了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
angular是Google開發(fā)的一個單頁面應(yīng)用框架,是現(xiàn)在比較主流的單頁面應(yīng)用框架之一，下面通過本文給大家介紹AngularJs中route的使用方法和配置，感興趣的朋友一起學(xué)習(xí)吧2016-02-02
這篇文章主要介紹了AngularJS過濾器filter用法,結(jié)合實例形式分析了過濾器filter的功能、分類、使用方法與相關(guān)注意事項,需要的朋友可以參考下2016-12-12
本篇文章主要介紹了淺談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
本教程旨在幫助你盡可能快速而有效地學(xué)習(xí)AngularJS。通過該教程你會學(xué)習(xí)到AngularJS的一些基本特性，例如指令、表達式、過濾器、模塊和控制器等。以及其它所有你需要知道的有關(guān)AngularJS的東西，如事件、DOM節(jié)點、表單、用戶輸入、數(shù)據(jù)驗證、Http對象等。2015-09-09