AngularJs directive&controller交互第一章

之前講到directive自定義指令渊鞋,但是實(shí)際上單純創(chuàng)建指令是沒什么卵用的投队。減少開發(fā)成本畜伐,需要使用控制器與自己制作的指令交互吗讶。

<div ng-app=“App” ng-controller=“Ctrl ”>

? ? <—自定義一個指令—>

? ? <test testdata=“{{data}}”></test>

</div>

<script>

var app=angular.module(“App”,[]);

? ? app.controller(“Ctrl”function(){

? ? ? ? ? $scope.data=“測試數(shù)據(jù)”;

? ? });

? ? app.directive(“test”,function(){

? ? ? ? ? ? return{

? ? ? ? ? ? ? restrict:”AE”,

? ? ? ? ? ? ? template:”<div>{{dirdata}}</div>”,

? ? ? ? ? ? ? link:function(scope,element,attrs){

? ? ? ? ? scope.dirdata=attrs.testdata? ? ?

? ? ? ? ? ? ? }

? ? ? ? ? ? }? ?

? ? });

</script>

結(jié)果輸出:測試數(shù)據(jù)

說明:我看了一個晚上才發(fā)現(xiàn)袖裕。原來directive的數(shù)據(jù)表達(dá)方式與controller所賦值的數(shù)據(jù)的表達(dá)根本都不同曹抬。很有趣,自定義兩個指令之后(一個A一個E)急鳄,$sope居然可以直接訪問自定義的標(biāo)簽和屬性谤民。

這里的原理是這樣的,

1.定義test指令疾宏,以屬性的方式創(chuàng)建數(shù)據(jù)容器张足。

2.通過controller來給原來的容器存放數(shù)據(jù)

3.實(shí)例化test和data指令,創(chuàng)建一個模版坎藐,用于以普通html元素渲染數(shù)據(jù)为牍。

4.因?yàn)闊o法直接用test標(biāo)簽渲染數(shù)據(jù)。所以岩馍,初始化好了的數(shù)據(jù)都需要放到模版中渲染碉咆。所以接下來就需要將指令中的數(shù)據(jù)賦值到模版中(使用directive配置項(xiàng)的“l(fā)ink”函數(shù))


注:link函數(shù):這個函數(shù)用于定義指令的行為,(僅限于指令內(nèi)部)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蛀恩,一起剝皮案震驚了整個濱河市疫铜,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌双谆,老刑警劉巖壳咕,帶你破解...
    沈念sama閱讀 222,627評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件席揽,死亡現(xiàn)場離奇詭異,居然都是意外死亡谓厘,警方通過查閱死者的電腦和手機(jī)幌羞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來庞呕,“玉大人新翎,你說我怎么就攤上這事∽×罚” “怎么了地啰?”我有些...
    開封第一講書人閱讀 169,346評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長讲逛。 經(jīng)常有香客問我亏吝,道長,這世上最難降的妖魔是什么盏混? 我笑而不...
    開封第一講書人閱讀 60,097評論 1 300
  • 正文 為了忘掉前任蔚鸥,我火速辦了婚禮,結(jié)果婚禮上许赃,老公的妹妹穿的比我還像新娘止喷。我一直安慰自己,他們只是感情好混聊,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,100評論 6 398
  • 文/花漫 我一把揭開白布弹谁。 她就那樣靜靜地躺著,像睡著了一般句喜。 火紅的嫁衣襯著肌膚如雪预愤。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,696評論 1 312
  • 那天咳胃,我揣著相機(jī)與錄音植康,去河邊找鬼。 笑死展懈,一個胖子當(dāng)著我的面吹牛销睁,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播存崖,決...
    沈念sama閱讀 41,165評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼榄攀,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了金句?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,108評論 0 277
  • 序言:老撾萬榮一對情侶失蹤吕嘀,失蹤者是張志新(化名)和其女友劉穎违寞,沒想到半個月后贞瞒,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,646評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡趁曼,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,709評論 3 342
  • 正文 我和宋清朗相戀三年军浆,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片挡闰。...
    茶點(diǎn)故事閱讀 40,861評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡乒融,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出摄悯,到底是詐尸還是另有隱情赞季,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布奢驯,位于F島的核電站申钩,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏瘪阁。R本人自食惡果不足惜撒遣,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,196評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望管跺。 院中可真熱鬧义黎,春花似錦、人聲如沸豁跑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽贩绕。三九已至火的,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間淑倾,已是汗流浹背馏鹤。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留娇哆,地道東北人湃累。 一個月前我還...
    沈念sama閱讀 49,287評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像碍讨,于是被迫代替她去往敵國和親治力。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,860評論 2 361

推薦閱讀更多精彩內(nèi)容