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