ch3my ch3my - 1 year ago 610
AngularJS Question

Dynamic ui-sref values

I want ng-repeat to build the hrefs from the ui-srefs inside a string. FAQs are stored in a database with links in the text.


"question": "How do I find out about you?",
"answer": "Go here "<a ui-sref='root.aboutUs'>about us"</a> page."


(function() {
'use strict';

.controller('Faqs', Faqs);

Faqs.$inject = ['faqService', 'exception', '$document', '$sce'];
/* @ngInject */
function Faqs(faqService, exception, $document, $sce) {
var vm = this;
vm.trustAsHtml = $sce.trustAsHtml;
.then(function (response){
vm.allFaqs = response;
.catch(function (){
exception.catcher('Error retrieving faqs')(message);


<div id="faq_{{$index}}" ng-repeat="faq in faqs.allFaqs track by $index">
<span ng-bind-html="faqs.trustAsHtml(faq.question)"></span>
<span ng-bind-html="faqs.trustAsHtml(faq.answer)"></span>


I'm looking for a way to process the ui-srefs coming from the json feed so the links work. Is there a way to do this?

Thanks in advance.



(function () {
'use strict';

.directive('compileHtml', compileHtml);

/* @ngInject */
compileHtml.$inject = ['$compile', '$sce'];
function compileHtml($compile, $sce) {
return {
restrict: 'A',
replace: true,
link: function (scope, element, attrs) {
var html = attrs.compileHtml;
html = $sce.trustAsHtml(html);


<div id="faq_{{$index}}" ng-repeat="faq in faqs.allFaqs track by $index">
<span compile-html="{{faq.question}}"></span>
<span compile-html="{{faq.answer}}"></span>

Thanks to goliney for pointing me in the right direction! Directive turns string into html and then compiles it back to the scope which makes the ui-srefs come to life.

Answer Source

What you need is $compile service.


faqApp.controller('homeCtrl', function($scope, $sce, $compile) {
    $scope.test = "hello there!";
    $scope.allFaqs = [{
      "question": "Where can I get info about you?",
      "answer": $compile("<span>Go here: <a ui-sref='about'>about us</a><span>")($scope).html()
    $scope.trustAsHtml = $sce.trustAsHtml;
  1. Pass html to $compile. Note, that html has to have single root element.
  2. $compile() returns linking function, which can then be used to link $scope.
  3. Linked template can be injected in DOM. To make it work with the rest of your code I apply .html() to the linked template. But I would recomend to have a directive for that. Actually, if at some point you have to work with DOM - directives is a way to go. You may find this SO answer useful.