読者です 読者をやめる 読者になる 読者になる

angular.jsのdirectiveでng-popstateをつくる

HTML5のHistory APIでは、pushStateでスタックへ積んだ状態を、window.onpopstateにセットしたイベントハンドラで受け取ることができます。このイベントハンドラをangular.jsで扱いやすいようにng-popstateという属性を定義するという内容です。

app.directive("ngPopstate", function($parse, $timeout, $window){
    return function($scope, $element, $attributes){
      var fn = $parse($attributes["ngPopstate"]);

大文字はハイフン区切りに変換されるようなので "ng-popstate"という属性にしたければ"ngPopstate"という名前にします。

"ng-popstate"属性が指定された要素が$elementに、その要素の各属性が$attributesの値になります。

この例ではbody要素に'ng-popstate="onPopState($state)"'と指定しました。 そうすると"onPopState($state)"がそっくりそのまま$attributes["ngPopstate"]に格納されます。 このままだとただの文字列であり、onPopStateを呼べないので$parseでパースします。

あとは以下のように引数をバインドしてファンクションを呼んでやります。

fn($scope, {
    $state : event.state,
    $event : event
});

オブジェクトで渡している$stateと$eventは、ng-popstateに記述された引数に束縛されます。この例では"onPopState($state)"としてますので$stateの方だけ渡されることになります。