前天我寫了一個 Angularjs 的 select 連動功能，發現一些使用上會忽略的事情特在此紀錄一下!
有寫過 Angularjs 的人就會知道 select 跟 ng-options是多麼的好用!
其中只要 ng-model榜定一下，我們選了什麼立刻就反應回去我們的model!
也因此我們可以透過 $watch() 監看我們綁定的值或是用ng-change這兩種方式來觸發選取後的動作!
這兩種方是我都試過但我個人偏好使用 ng-change ( 主觀的只是一種 fu.....XD
但我遇到的一個問題是用 ng-options 的時候 select 會有空白選項.....
難道我遇到了傳說中的「留白」.....
在藝術或設計手法中適當的留白可以營造一種氣氛! 襯托出一種心境上的氛圍!
但在程式上這就叫做「BUG」...... ( 怎差這麼的多.....
後來我發現會有這問題其實是因為我們 ng-model 一開始的初始值是空的啦!
只要給一下初始值就不會「留白」囉!
例如：
<select ng-model="township.ZipCode" ng-options="township.ZipCode as township.Name for township in areas" ng-change="townshipChange()"></select>
如果一開始我們的 scope.areas 是[]，就會有這問題!
解決方是就是不要讓它是空的就行囉!
2013年7月25日 星期四
2013年7月22日 星期一
Angularjs 搭配 SVG!
上個禮拜我在關心一個問題! 那就是用 Angularjs 怎樣畫圖比較方便!
座標、顏色等的屬性我都省略了! 但看整個結構可以發現! 它就跟我們一般的網頁標籤一樣! 所以比如我們要在某個多邊形加一個按下事件就可以這樣寫：
<div ng-controller="myController">
<svg>
<polygon ng-click="select()"></polygon>
<polygon></polygon>
<polygon></polygon>
</svg>
</div>
所以我個人覺得啦! Angularjs 跟 SVG 搭配還挺不錯的! ( XD....
剛好今天LION大大交代我改CMS這案子的一個東西!
就是要加色碼選擇器!
我後來用SVG做了一個127色的色碼選擇器如下所示：
使用者只要 mousemove 進一個多邊形就會回傳一組16進位的色碼進去程式中!
我本來想要寫成 directive 但後來太客戶在催太趕了!
我來不及寫成 directive 所以就先寫成一般的方式!
等我有空的時候再來把它改寫成 directive! 這樣就可以多個地方重複使用囉!! ^ . ^
現在再web上畫圖不外乎幾種常用方法：
1.用SVG (向量繪圖)
2.用CSS (就像我上一篇那樣畫法)
3.用Canvas (html5的新標籤)
有些人可能會覺得為什麼要在web上畫圖而不直接用圖片就好呢?
我自己是覺得啦! 因為用圖片做一些動畫沒有上面方法方便，如果有很多變化就要很多圖片一直切換很麻煩....又很占空間效能!
另外如果想要圖片上某些位置觸發某些事件這樣的功能!
我就還要切圖片切出一個個的範圍然後針對圖片的某個範圍寫事件...這也很麻煩!
像我之前寫過一個計算機!
用一個計算機的圖片在 photoshop 中切出一堆範圍，然後在這些範圍寫 javascript 事件!
比如要算 10+25
1是一個範圍
0是一個範圍
+是一個範圍
2是一個範圍
5是一個範圍
雖然功能也是能完成啦! 但這樣多累阿! 寫起來程式碼又很亂!
所以某些時候真的還是要用上述那三種方式畫圖會比用圖片還方便!!
也因為這原因，我就在思考這三種方式怎樣跟 Angularjs 最好搭配!!
Canvas方法因為是直接在 Canvas 標籤裡面呼叫繪圖API來畫圖，所以我感覺跟 Angularjs 搭配怪怪的! 因為沒地方可以用那些 預設的 directive 啊!
CSS方法則是畫圖的數據資料都放在 <style></style> 裡面，但 Angularjs 又不能控制外部樣式的內容! 行內樣式硬要控制好像可以控制啦! 但應該沒人用CSS行內樣式畫圖的吧! (那會瘋掉...
而SVG這東西其實我完全沒碰過，所以我去找了一下資料，學了一下要怎用! 後來我找到一篇文章還不錯!
如何在 SVG 與 Canvas 之間選擇
雖然現在用Canvas來畫圖是個顯學!
但文中也比較了一些優缺點! 用Canvas來畫圖還是有缺點的唷!
好! 回到重點!
在我研究完SVG如何使用之後!
我自己覺得 SVG 跟 Angularjs 應該可以搭配得很好!
因為SVG是用很像標籤的東西在畫圖，格式就像下面所示：
<div>
<svg>
<polygon></polygon>
<polygon></polygon>
<polygon></polygon>
</svg>
</div>
好! 回到重點!
在我研究完SVG如何使用之後!
我自己覺得 SVG 跟 Angularjs 應該可以搭配得很好!
因為SVG是用很像標籤的東西在畫圖，格式就像下面所示：
<div>
<svg>
<polygon></polygon>
<polygon></polygon>
<polygon></polygon>
</svg>
</div>
座標、顏色等的屬性我都省略了! 但看整個結構可以發現! 它就跟我們一般的網頁標籤一樣! 所以比如我們要在某個多邊形加一個按下事件就可以這樣寫：
<div ng-controller="myController">
<svg>
<polygon ng-click="select()"></polygon>
<polygon></polygon>
<polygon></polygon>
</svg>
</div>
所以我個人覺得啦! Angularjs 跟 SVG 搭配還挺不錯的! ( XD....
剛好今天LION大大交代我改CMS這案子的一個東西!
就是要加色碼選擇器!
我後來用SVG做了一個127色的色碼選擇器如下所示：
使用者只要 mousemove 進一個多邊形就會回傳一組16進位的色碼進去程式中!
我本來想要寫成 directive 但後來太客戶在催太趕了!
我來不及寫成 directive 所以就先寫成一般的方式!
等我有空的時候再來把它改寫成 directive! 這樣就可以多個地方重複使用囉!! ^ . ^
2013年7月17日 星期三
神奇的directive!
今天我的工作心得有點像大雜燴XD
.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>
這乍看之下好像很乾淨是吧!
但保哥針對這作法提出了幾點隱憂，我覺得滿有道理的，整理如下：
$('.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 呢?
哈哈! 這東西今天被我找到了!
救世主降臨!
$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就會沒有作用....
但directive的名稱有任何符號還是會失效唷!!
切!..... 害我改了好久想說是哪裡中猴了哩.....Orz
因為有參雜一些之前犯的錯誤以及今天的新發現，所以跟前兩天的文章不一樣，比較不是聚焦某一點的內容，但我會盡量整合的好像是在講同一件事啦.....
在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
2013年7月15日 星期一
ng-repeat是多胞胎產生器!
在 Angularjs的世界裡，我覺得ng-repeat這玩意兒應該可以算是前5名常用的功能吧!
沒錯! 就像上圖一樣! 只要有了ng-repeat一次生出多胞胎再也不用大粒汗小粒汗!
所有重複性的table資料、重複性的list資料、重複性的div資料....(我現在不斷重複也是...= =
都可以透過ng-repeat來迅速完成!!
但是， 我們都知道雙胞胎不管長的多像， 還是有些微的不同!
這可能是老天爺為了要給辛苦的媽媽好分辨用吧! 就感心耶!!
所以啦! 當你的孩兒們(model裡的資料)都長的一模一樣的時候，
oh my god~ 神的審判之槌就會降臨，F12按下去，Error之槌就會共尬力咪咪冒冒...$#&$@!
比如說，我的model data 長的如下:
$scope.model.chlidren=["大寶"，"大寶"，"大寶"，"大寶"];
html長的如下:
<ul>
<li ng-repeat="model.children">
</ul>
這時候F12審判之神會告訴你:
My dear , Duplicates in a repeater are not allowed.
(翻譯: 親帶的，你的多胞胎因長得一模一樣有基因改造之疑慮所以予以駁回!)
蝦密! 我黃豆吃太多了嗎? 政府沒有把關! 現在到底還有什麼可以吃...
沒關係! 在Angularjs 的世界裡，好險我們不用肝臟來代謝毒素，也不用害怕毒素會殘留在體內！
只要把<li ng-repeat="model.children">這句改成，<li ng-repeat="model.children track by $index">即可!
我是這理解的，孩子長得一模一樣沒關係，給他們各自不一樣的「胎記」就好，而這胎記就是$index啦!
神奇唄!
PS: Angularjs世界是可以這樣啦! 但現實世界怎麼辦? 現在還有什麼可以吃的啦 >< 喔我的天..
 |
| photo credit: Spigoo via photopin cc |
所有重複性的table資料、重複性的list資料、重複性的div資料....(我現在不斷重複也是...= =
都可以透過ng-repeat來迅速完成!!
但是， 我們都知道雙胞胎不管長的多像， 還是有些微的不同!
這可能是老天爺為了要給辛苦的媽媽好分辨用吧! 就感心耶!!
所以啦! 當你的孩兒們(model裡的資料)都長的一模一樣的時候，
oh my god~ 神的審判之槌就會降臨，F12按下去，Error之槌就會共尬力咪咪冒冒...$#&$@!
比如說，我的model data 長的如下:
$scope.model.chlidren=["大寶"，"大寶"，"大寶"，"大寶"];
html長的如下:
<ul>
<li ng-repeat="model.children">
</ul>
這時候F12審判之神會告訴你:
My dear , Duplicates in a repeater are not allowed.
(翻譯: 親帶的，你的多胞胎因長得一模一樣有基因改造之疑慮所以予以駁回!)
蝦密! 我黃豆吃太多了嗎? 政府沒有把關! 現在到底還有什麼可以吃...
沒關係! 在Angularjs 的世界裡，好險我們不用肝臟來代謝毒素，也不用害怕毒素會殘留在體內！
只要把<li ng-repeat="model.children">這句改成，<li ng-repeat="model.children track by $index">即可!
我是這理解的，孩子長得一模一樣沒關係，給他們各自不一樣的「胎記」就好，而這胎記就是$index啦!
神奇唄!
PS: Angularjs世界是可以這樣啦! 但現實世界怎麼辦? 現在還有什麼可以吃的啦 >< 喔我的天..
開張文!!
阿福兔E之家開張囉!
其實這是我第一次寫Blog!
雖然之前一直也都寫的計畫! ( 計畫總是那麼美好....
但總是沒個目標不知道要寫什麼....暈~
剛好的是! 今年7月我正式成為多奇家族的一員了!!
開始作著我之前就一直十分想做的網頁前端工作 ^.^ YA比!
然後保哥也十分鼓勵我們寫些技術文章!!
一方面是能作為和他人交流的一種方式!!
另一方面是幫助自己記憶 (唉唷!! 人越大記性越不好咩!~
所以就稱著這次機會終於開始我的部落格生涯囉!!
我會記錄著前端工作的點點滴滴!
每天記錄一點! 總有一天會變一大點是吧! XD
給自己一個期許! 我要成功! 我要成功! 加油! 加油! 加油!
訂閱：
文章 (Atom)