Angularjs attribute with html content

Question

I want to have html content in my attribute to style the output, with lists and strong words etc.

 angular.module('calc.popover', []) .directive('popover', function() { return { restrict: 'E', templateUrl: '/partials/popover.tpl.html', scope: { title: '@', content: '@' } } }; 

  <popover title="I am a popover" content="Many Text <br> New line. <ul><li> a list </li></ul>"></popover> 

How can i do this? If i do this, the output shows me the html tags.

Answer 1

You need to use 'ngTransclude' property to get html template content in directive, and pass content to directive like this: <popover title="I am a popover"><br> New line. <ul><li> a list </li></ul>"></popover> <popover title="I am a popover"><br> New line. <ul><li> a list </li></ul>"></popover> For working Example check: http://plnkr.co/edit/5RKBZRBmEH6PMvmbZomt?p=preview