Unavailable: 2013/08

2013/08/18

AngularJS雜記 (基於1.2的版本)

$timeout這個服務基本上是一個window.setTimetout的wrapper，它有一個很大的用處是其function執行時間會在Angular DOM rendering之後 (譬如在data變動之後，view跟著重新render...)

避免angular在render時DOM的閃現問題，可以使用ngCloak先將DOM隱藏，不過此directive要配合一段css才有作用，在1.2版是
```
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
```

Controller之前的溝通：

配合$rootScope(或parent scope)使用event handler來處理child scope間的溝通(Scope.$on及Scope.$emit，Scope.$broadcast)
或以Module建立一個service，用dependency inject的方式注入到各contoller裡，作為溝通的橋梁 (參考service/factory/provider三個api之間的差異)

在scope life-cycle外要解析angular的expression用Scope.$apply (會觸發data-binding的檢查)，否則用Scope.$eval即可 (參考Scope life-cycle及Angular data-binding)

關於Directive (這邊Directive Definition Object簡稱DDO)：
1. DDO裡的controller，有可能建立不只一個instance (同樣的directive出現多個的情況)，所以這種controller比較適合用來與child /sibling directive溝通；而要跨同種directive間的溝通用injected service比較好 (angular內的service全都是singleton，不論是透過Module.service/ Module.factory或$provide.provider註冊的)。
有繼承關係的Scope要注意存取parent Scope變數的問題，尤其是一些directive會建立Child Scope而使用者沒查覺的時候；請參考這篇文章。

跨瀏覽器相容性問題雜記

目前webkit瀏覽器(Safari/ Chrome v.28)在連結被點擊時不會把CSS中的:focus樣式給套上，目前的解法是替連結加上tabindex的屬性。
```
 
```

2013/08/10

用jQuery寫出scrolling動畫效果

網路上的範例大多以body為容器，稍微修改了一下以適應在其他DOM內的scrolling效果：

/**
 * @param target a jQuery selector string, target DOM; or scrollTop value
 * @param container a jQuery selector string, represents DOM which contains target, default is 'html, body'
 */
function smoothScrollTo(target, container) {
    container = container ? container : 'html, body';

    $(container).animate({
        scrollTop: $.isNumeric(target) ? 
            target : 
            $(target).offset().top 
                + $(container).scrollTop() 
                - $(container).offset().top
    }, 300);
}

// Ex: smoothScrollTo('#anchor');

Anchor 1

This page is made to demonstrate what i learned from some popular javascript library/framework. For now, it used H5BP as basic template, Bootstrap for layout and CSS style, and jQuery. (Backbone.js is going to be added for MVC implemenation)

Anchor 2