angularjs - カスタム属性を含み、$http サービスから返されたコンテンツのコンパイル

Question

私は、クライアント側に大きく依存し、RESTful API を介してアプリのコンポーネントのほとんどをレンダリングする角度のあるアプリケーションに取り組んでいます。そのうちの 1 つは、JSON ファイルに格納されるナビゲーション コンポーネントであり、ui-router 構文を使用して状態間を移動するリンクのリストで構成されます。

これまでのところ、json からナビゲーションを構築するサービスを作成することができました。次に、コントローラーを使用して、Angular のサニタイズ サービスを使用してビューにレンダリングします。私が行き詰まっているのは、結果リンクがクリックできないハードコードされた文字列として表示されることです。

私が読んださまざまなスレッドから、それらがコンパイルされておらず、単にビューにスローされているためだと思いますが、それらをコンパイル/動作させることができません。hereやhereなどの同様のスレッドを見てきましたが、それらはすべてカスタムディレクティブの作成を中継しています。$http サービスから返される動的な html (具体的には ui-sref リンク) をレンダリングしてコンパイルする必要があります。

JSFiddle

<div ng-controller="TopNavController as TopNavCtrl">
  Output Navigation : 
  <div ng-bind-html="topnavCtrl.navbar"></div>
</div>
<!-- json file contains something similar to this :
<ul>
<li><a ui-sref="catpage({category: 'products', subcategory: 'whale toys'})" </a>Whale Toys</li>
<li><a ui-sref="catpage({category: 'products', subcategory: 'sharks toys'})"">Shark Toys</a></li>
</ul>
 -->

var myApp = angular.module('myApp',[]);

myApp.controller('TopNavController', ['NavbarFactory', '$sce', function(NavbarFactory, $sce) {
         var self = this;
         self.navbar ="";         

         NavbarFactory.getnav().then(function(data) {           

             self.navbar = $sce.trustAsHtml(data);
         });

     }])

.factory('NavbarFactory', ['$http', function($http) {

        return {
            getnav: function() {
                return $http.get('/path/myjson').then(function(answer) {

                        var result = answer.data;                       
                        return result
                    },
                    function(error) {
                        console.log('Failed');
                    });
            }      
        }

}]);