1

I am working on an angular application that relies heavily on the client-side and renders most of the app's components through a RESTful API. One of which, is a navigation component which is stored in a JSON file, and is comprised of a list of links that use the ui-router syntax to navigate between states.

So far, I've managed to write a service that builds the nav from a json. Then, using a controller, I'm rendering it to the view using angular's sanitize service. The part I'm stuck at is, the result links appear as hard-coded strings that aren't clickable.

From different threads I read, I assume it's because they aren't compiled and just thrown to the view, but I'm unable to get them to compile / work. I've seen similar threads such as here and here but they all relay on creating a custom directive for it. I need to render and compile dynamic html (ui-sref links in specific) that are returned from an $http service.

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');
                    });
            }      
        }

}]);
Community
  • 1
  • 1

0 Answers0