用 factory 讓兩個 controller 共享資源

通常,父子階層關係的 controller 間要呼叫 methon ,會使用$emit或著 $broadcast,但如果遇到同層間的傳遞,就必須要用factory(官網文件)來做,結構如下:

<div ng-controller="first">
    <!-- 很多結構 -->
</div>

<div ng-controller="second">
    <!-- 很多結構 -->
</div>
繼續閱讀.....

在click事件中實作double click

今天在使用一個套件時,套件本身對於 DOM 只有做 click 的事件綁定,並沒有做 dblclick 的事件綁定,所以在 on 時根本 on 不進去,當然直接修改 plugin 的 code 就可以解決這個問題,但是考量到日後更新套件的問題,不直接去修改code。

setTimeoutdblclick

var timerID;
var el = document.getElementById('testButton');

el.onclick=function(e){
   if(timerID){
      clearTimeout(timerID);
      timerID=null;
      console.log("double");
   } else{
      timerID=setTimeout(function(){
        timerID=null;
        console.log("single")
      },250);
   }
}

從上述範例可以看到,timerID 是拿來做判斷用,當我今天第一次 click 時, timerID 的值為 undefined ,所以判斷為 false,當你快點兩下時,第一下則已經設定為 setTimeout ,第二次回到 if 判斷式時則會 number 的形態,在if中判斷為 true,並用 clearTimeout() 來清掉原先 setTimeout ,並連同 function 內的事一併清掉,用這種方式來達到在 click 事件中達到 dblclick

【mac小套件】Hosts

Hosts下載
會用到這個套件,是因為這次更新 Yosemite 的時候,我 pow 這個開發套件如果在沒網路的情況下就掛了,後來發現是要到 host 文件底下去新增,Casper就推薦我這個可以管理Host文件的軟體,記錄一下囉。

解決 pow 無法在 OSX Yosemite (10.10) 正常運作

pow (GitHub頁面) 是拿來快速建立 Rack server 的工具,也可以搭配 powder一起使用,可以更快速的操作。

這次 Yosemite 的更新,拿掉了ipfw,所以 pow 無法正常運作(操考github上的issue #452),目前已經更新至 pow 0.5.0,仍要做一些設定才可以正常運作,步驟如下:

繼續閱讀.....
pow

【AngularJS】在 directive 呼叫 controller 的 function

上週寫了一段 angular,有一個變數是拿來控制 divng-hidehtml 結構如下:

<body ng-controller="addDateControl">
    <a href="#" ng-click="showDate($event)">add one</a>
  <div clss="date-warp" ng-hide="dateDisable">
    <a href="#" vote-select-list>add date</a>
  </div>
</body>
繼續閱讀.....

在VM底下開啟powder連結

powder 對於 rails 專案來說真的很方便,但在測試網頁的時候,還是會用到很多 VM 環境去跑 Win 做測試,原先我可能在 rails 專案中的 pow link,就沒辦法在 VM 中開啟,假設 link 為firefoQQ.dev/,那我要如何開啟呢?

可以參考xip.io,格式如下:

  • 10.0.0.1.xip.io resolves to 10.0.0.1
  • www.10.0.0.1.xip.io resolves to 10.0.0.1
  • mysite.10.0.0.1.xip.io resolves to 10.0.0.1
  • foo.bar.10.0.0.1.xip.io resolves to 10.0.0.1

範例中的10.0.0.1是指你本身的IP,假設我的 IP 為 192.168.0.1 不是 VM 系統中的。依照firefoQQ.dev/來做修改的話,就是firefoQQ.dev.192.168.0.1.xip.io,在 VM 中的瀏覽器直接輸入上列網址,就能夠跟原本系統上跑的畫面相同。

Git 學習之路

了解Git

  1. 寫給大家的 Git 教學:初階
  2. 写给Git初学者的7个建议:初階
  3. 图解Git:初階
  4. Git Pro簡中版:初中階
  5. Git官網中文版:初中階
  6. Git 版本控制系統-ihower:較艱深
  7. Learn Version Control with Git
繼續閱讀.....

GitHub.io個人頁面

我們可以用 github 本身提供的 github.io 來建立一些簡單的網頁,有兩個方法如下:

一、重新建立一個repository (github教學)

這個方法大部分會用在你一開始就要建立github.io的頁面時使用,可參考 github 教學去操作,大致步驟如下:

  1. 主要只有在建立 repository 的名稱為username.github.io,這裡的username指的是你自己的 github 帳號。
  2. 然後在專案 clone 下來,並在裡面加入index.html的檔案。
  3. add 檔案,commit完成後,push 上去就完成了!!
  4. 輸入http://username.github.iousername一樣是你的github帳號唷~

二、在原有的專案裡面開一個 gh-page 的 branch (github教學參考)

這個方法大部分是建立在已經現有的專案裡,這樣你就不必再去另外開一個專案出來,步驟如下:

  1. 建立一個gh-page的branch。
  2. 把要顯示的html內容放到這個branch底下,index.html一樣也是最基本的檔案。
  3. add,commit,push這個gh-page的branch到github上。
  4. 顯示的網址為: http(s)://<username>.github.io/<projectname>username一樣是帳號,projectname則是你這個github專案的名稱。

偽元素的另類用法(:after、:before)

什麼是偽元素? :和::的差別?

:after:before這兩就是偽元素,但為了跟偽類最區別,css3的定義開始,將偽元素改為::after::before

繼續閱讀.....

Sublime Text 備份設定到 DropBox

  1. 先在 Dropbox 底下建立一個資料夾,可手動,也可用指令,指令如下:
    mkdir ~/Dropbox/sublime-text-3/
    
繼續閱讀.....