#jqlite

環境設定

不載入 jQuery

由於 AngularJS v1.2.0 於本文撰寫時尚在 RC2，並且我自己主 project 在使用的版本為 v1.1.5，因此本文針對的版本為 v1.1.5。

.css() as setter 不會自動加上 px 單位

jQuery 除了部分的 css style，其餘 style 在沒有帶入單位的時候，預設都會加上 px 做為單位，而 jqLite 不會幫你加。

// works iElm.css('font-size', '18px'); // won't work iElm.css('font-size', 18);

Demo

與下一段 getter 一併 Demo。

.css() as getter 不會取 computed style

有些 style 是具有繼承性質的(e.g. font-size, color, etc...)，而 jqLite 的 .css() 不像 jQuery 會想辦法取得瀏覽器計算後的結果，它只能夠取得該 DOM element 上已設定的 style 內容。

console.log( iElm.css('font-size') ); // output: "" // jQuery 的取法 iElm[0].ownerDocument.defaultView.getComputedStyle(iElm[0]).fontSize;

Demo

利用 <input type="text"> 來修改期望的 font-size

用上一段所說的方法實做了兩種 setter 的 directive font-size-success 及 font-size-error

更新 font-size 的同時，另一個 directive get-font-size 會嘗試從沒有被直接設定 style 的 <span> 上取得 jqLite 直接拿的 font-size 以及計算的 font-size

.bind() 與 .unbind() 對 eventType 參數的理解不同

此問題於 v1.2.0rc1 後已修正。

何謂理解不同呢？在 eventType 代入 "play ended pause" 的時候：

.bind() 會視為 play, ended, pause 三個分別處理

.unbind() 沒有把它們切開，於是根本就會找不到這個 event 來 unbind

// 一次綁三個: play, ended, pause iElm.bind('play ended pause', playbackHandler); // 這邊這樣無法 unbind 且不會跳錯誤 iElm.unbind('play ended pause', playbackHandler); // 一樣無法 unbind iElm.unbind('play ended pause'); // 成功 unbind，不過基本上把事件都清光了 iElm.unbind(); // 一個一個來會成功 angular.forEach(['play', 'ended', 'pause'], function (evtName) { iElm.unbind(evtName, playbackHandler); }); // 對，就是一個一個來 iElm.unbind('play', playbackHandler); iElm.unbind('ended', playbackHandler); iElm.unbind('pause', playbackHandler);

Demo

bind-unbind directive 試著將給定的事件 .bind() 至按鈕上並立刻 .unbind()

實作 .unbind() 的方法是上述不會成功的做法，因此嘗試去按鈕上觸發事件還是可以成功執行 bind-unbind-trigger 的內容

歡迎使用 Edit 功能將 directive 裡面的 .unbind() 替換成會成功的做法看看結果

TL;DR

把 jQuery 擺在 AngularJS 前載入，一勞永逸。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>