2015年9月18日金曜日

Angularでテンプレートを切り替えたタイミングで、Material Design Liteのコンポーネントを更新する

AngularJSとMaterial Design Liteを組み合わせて使った場合で、Angularのrouteを使ってtemplateを切り替えた場合、
切り替えて出力されたmdlコンポーネントの初期化処理が実行されない問題が発生した。

この問題を回避するには、templateを切り替えたタイミングでcomponentHandler.upgradeDom();を呼び出してあげれば良い。
参考サイト

    angular.module('app', ['ngRoute', 'ngResource'])
        .run(function ($rootScope, $location, $timeout) {
            $rootScope.$on('$viewContentLoaded', function () {
                $timeout(function () {
                  componentHandler.upgradeAllRegistered();
            });
        })
    })