angular-ui-routerで、templateUrlを動的に取得する方法

先日からAngularJSの勉強をはじめまして、実践なくして習得なし!のもと、「WordPressにAngularJSのルーティングを導入する」という誰も得をしないコードを書いてたりします。
 
そのプロセスで、「テンプレートを動的に取得する」ということが必要でした。しかし、なぜか検索にひっかかるサンプルが動かないという驚愕の事態が起こり試行錯誤する羽目になったので、どうやったら動的取得ができるかメモしておきます。

概略

やったこと:URLを一部をテンプレートURLとして活用
使ったもの:angular-ui-router

HTML

        <a ui-sref='wp({id: hogehoge}})'>リンク</a>

JavaScript

        $stateProvider
            .state('wp',{
                url: "/:id",
                templateUrl: function($stateParams) {
                    var url = "http://hoge.hoge/" + $stateParams.id;
                    return url;
                },
            });

 

詳細

やってることを簡単に書きますと、html部分

        <a ui-sref='wp({id: hogehoge}})'>リンク</a>

で、state名「wp」の引数「id」を「hogehoge」に指定しています。
 
で、JavaScript側でこの引数を取得する部分が

        url: "/:id",

になります。で、この引数ですが、$stateParamsに格納されていまして。templateUrlで呼び出す時には関数で取得しなければなりません。で、呼び出す時は「 $stateParams.id 」という名前になって、それをreturnで返してtemplateUrlに適応させています。
 
それでは、また。

お問い合わせ