1

我正在开发一个严重依赖客户端并通过 RESTful API 呈现应用程序的大部分组件的 Angular 应用程序。其中之一是存储在 JSON 文件中的导航组件，它由使用 ui-router 语法在状态之间导航的链接列表组成。

到目前为止，我已经设法编写了一个从 json 构建导航的服务。然后，使用控制器，我使用 Angular 的 sanitize 服务将其渲染到视图中。我坚持的部分是，结果链接显示为不可点击的硬编码字符串。

从我阅读的不同线程中，我认为这是因为它们没有被编译而只是被扔到视图中，但我无法让它们编译/工作。我见过类似的线程，例如此处和此处，但它们都依赖于为其创建自定义指令。我需要渲染和编译从 $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');
                    });
            }      
        }

}]);
4

0 回答 0