因為有參雜一些之前犯的錯誤以及今天的新發現,所以跟前兩天的文章不一樣,比較不是聚焦某一點的內容,但我會盡量整合的好像是在講同一件事啦.....
在Angularjs的世界裡面,有一個東西叫「directive」!
這東西我第一次看到的時候是被它那自訂標籤的功能所深深吸引! (真是太神奇了...
能夠自訂標籤就代表我能當神耶!....
雖然它不只可以當標籤,也可以當屬性、類別或comment(這個我不知道中文叫什麼...)
所以我之前就習慣把所有的東西全部打成一包,然後就當成標籤了! 比如下面這例子:
return{
restrict:'E',
template:'<a class="btn btn-primary btn-small">按鈕</a>',
link:function(scope,element){
element.bind('click',function(){
alert("test");
})
}
}
})
html 如下:
<back></back>
這乍看之下好像很乾淨是吧!
但保哥針對這作法提出了幾點隱憂,我覺得滿有道理的,整理如下:
1.外觀寫在template裡面,要動任何外觀都要再改template,並不彈性
2.外觀和行為全部混為一談,並不好維護
3.在一個標籤上雖然可以自訂一堆directives但根本沒意義,還不如用簡單的attribute來做
第三點白話意思就是「搞那麼複雜幹嘛啦! 有更簡單的做法幹嘛不用! 」
那更簡單的方法是什麼呢?
我從保哥給我的了一個jquery的例子中找到靈感:
e.preventDefault();
var uri = $(this).data('url');
if(url)
{
alert('This url is ' + url);
}
});
html如下:
<a href="#" class="btnBack" data-url="#/Account">回上頁 (代入 data-url 屬性)</a>
有看到一個陌生的東西嗎? data-url ?
後來我才知道,原來html5可以自訂屬性耶! 用法格式就是 data-*
如此看來,用directive寫一堆自訂的directive 屬性好像真的有點多此一舉耶!
只要我能夠抓到我所自訂的 data-* 屬性值,我又何必用一堆directive attribute,然後又在directive的scope中寫一堆"@","=","$"呢?
是不是! 是不是!
這真的有如醍醐灌頂耶!
但問題是 jquery 可以用 data() 或 attr() 來抓屬性值! 但 Angularjs 呢?
哈哈! 這東西今天被我找到了!
救世主降臨!
$observe 就是救世主!
舉個例子,有個html 長的如下:
<a class="btn btn-primary btn-small back " href="a.htm">回上一頁</a>
那我要怎樣直接抓href這屬性的值呢? 做法如下:
app.directive('back',function(){
return{
restrict:'C',
link:function(scope,element,attr){
attr.$observe('href', function(actual_value) {
alert(actual_value);
});
}
};
});
看到那段紅色的程式碼了嗎?
那就是答案!
所以囉! 如果我們有其他額外的參數要作為行為的判斷依據,就自己加 data-* 然後再來抓這值就好囉!
這樣是不是比寫一堆directive attribute清楚多了呢! ( 好像是....XD
另外提醒一點啦! 如果自訂屬性是 data-count
那麼要抓它的值的語法是 attr.$observe('count', function(actual_value) 這樣唷!!
不要打成 'data-count' 囉!!
說個補充,有一次我在寫 directive 的時候發生了很奇怪的事情!
好恐怖! 超級恐怖!
那就是兩個一模一樣內容但名稱不一樣的directive,一個總是好的但另一個總是沒效果!
這兩個directive的名稱分別是 myPicture 和 pic
叫myPicture這個directive就是沒有反應! 怪事勒!
後來我請教了我們的LION大大,試了一會兒!
後來我們得到一個結論!
但directive的名稱有任何符號還是會失效唷!!
切!..... 害我改了好久想說是哪裡中猴了哩.....Orz
myPicture 要寫成 my-picture,並不是不能用大寫。
回覆刪除作者已經移除這則留言。
刪除原來如此!我知道了!!
刪除directive 叫 myPicture
在標籤裡面要這樣用 : my-picture
但如果directive 叫 my-picture
那這樣就沒作用!