displaying text that contains directives

Question

On my website, I want to standardize the way links to other persons look like, so I made a directive for it:

<my-person id="1"></my-person>

and

app.directive('myPerson', function() {
  return {
    restrict: 'E',
    replace: 'true',
    template: '<a href="#/person/{{person.id}}">{{person.name}}</a>',
    scope: {
      person_id : '=id',
    },
    controller: function($scope, Repository) {
      Repository.getPerson($scope.person_id).then(function(p) {
          $scope.person = p;
      });
    },
  };
});

This works well.

But in the next step, I want users to write news and in those news they want to refer to other persons. So basically, I want to display a text

'I met <my-person id="42"></my-person> yesterday.'

But when angularjs displays this context of my news entry, then the html tags are escaped of course and it is not compiled either.

Is there an easy way to achieve this? Here is a jsfiddle that shows my problem: jsfiddle link

score 2 · Accepted Answer · answered Sep 08 '17 at 10:45

You will need to compile your html inside the ng-repeat block.

For that make a directive like below

app.directive('bindHtmlCompile', ['$compile', function ($compile) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch(function () {
                    return scope.$eval(attrs.bindHtmlCompile);
                }, function (value) {
                    element.html(value);
                    $compile(element.contents())(scope);
                });
            }
        };
    }]);

now inside your ng-repeat add your directive to the span like this:

<span class="row"  bind-html-compile="newsEntry.text"></span>

working code here

Reference here

displaying text that contains directives

1 Answers1