神奇的directive!

今天我的工作心得有點像大雜燴XD

因為有參雜一些之前犯的錯誤以及今天的新發現，所以跟前兩天的文章不一樣，比較不是聚焦某一點的內容，但我會盡量整合的好像是在講同一件事啦.....

photo credit: markchadwickart via photopin cc

在Angularjs的世界裡面，有一個東西叫「directive」!

這東西我第一次看到的時候是被它那自訂標籤的功能所深深吸引! (真是太神奇了...

能夠自訂標籤就代表我能當神耶!....

雖然它不只可以當標籤，也可以當屬性、類別或comment(這個我不知道中文叫什麼...)

所以我之前就習慣把所有的東西全部打成一包，然後就當成標籤了! 比如下面這例子:

.directive('back',function(){
        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的例子中找到靈感：

$('.btnBack').on('click', function(e){
        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 呢?

哈哈! 這東西今天被我找到了!

救世主降臨!

photo credit: Waiting For The Word via photopin cc

 $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 的時候發生了很奇怪的事情!

好恐怖! 超級恐怖!

photo credit: Bob Jagendorf via photopin cc

那就是兩個一模一樣內容但名稱不一樣的directive，一個總是好的但另一個總是沒效果!

這兩個directive的名稱分別是 myPicture 和 pic

叫myPicture這個directive就是沒有反應! 怪事勒!

後來我請教了我們的LION大大，試了一會兒!

後來我們得到一個結論!

結論就是「名稱只能小寫」.....

只要有大寫或符號(包括底線)那麼這個directive就會沒有作用....

原來可以大寫! 我一直搞錯「-」這符號原來是要寫在標籤裡不是寫在名稱.....( 我是阿呆

但directive的名稱有任何符號還是會失效唷!! 

切!.....  害我改了好久想說是哪裡中猴了哩.....Orz