Dynamic ui-sref values

Question

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.

JSON

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

Controller

(function() {
'use strict';

angular
    .module('test.faqs')
    .controller('Faqs', Faqs);

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

HTML

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

PLUNKER

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.

SOLVED

Directive

(function () {
'use strict';

angular
    .module('test')
    .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);
            element.html(html);
            $compile(element.contents())(scope);
        }
    }
}
})();

Html

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

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.

Having a live demo always helps. – Serhii Holinei Jun 20 '16 at 13:41 — Serhii Holinei, Jun 20 '16 at 13:41

score 2 · Accepted Answer · edited May 23 '17 at 11:58

What you need is $compile service.

Updated PLUNKER

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

Pass html to $compile. Note, that html has to have single root element.
$compile() returns linking function, which can then be used to link $scope.
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.

Cheers mate:) That did it! – Joe Keene Jun 21 '16 at 08:54 — Joe Keene, Jun 21 '16 at 08:54

Dynamic ui-sref values

1 Answers1