Question

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

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

从我读过的不同主题，我认为它是因为它们没有编译而只是被抛到视图中，但是我无法让它们编译/工作。我见过类似的线程，例如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');
                    });
            }      
        }

}]);

编译包含自定义属性并从$ http服务返回的内容

0 个答案: