ng-bind-html on a string containing angular directive

Question

I'm using angular ng-bind-html to add a control to the current element. When I do this ,control gets added but any angular directive specified in the string is missing . For example

Original string : '<a ng-click="hello()" style="color:#8FA2AF">Hello</a>'; Resulting control : <a style="color:#8FA2AF">Hello</a>

Can anyone help?

html

<span >
      <p ng-bind-html="sample_text"> 
</span>

Controller

mymodule.controller('MyController',function MyController($scope) {
$scope.sample_text='<a ng-click="hello()" style="color:#8FA2AF">Hello</a>';
}

Poyraz Yilmaz · Accepted Answer · 2014-04-03 12:05:15Z

0

you shoud use $sce.trustAsHtml() like this...

$scope.sample_text= $sce.trustAsHtml('`enter code here`<a ng-click="hello()" style="color:#8FA2AF">Hello</a>');

but this way you cannot bind scope variables (like your hello() function) to your html so best way is writing a directive...

here is working PLUNKER for both $sce and directive example...

answered Apr 3, 2014 at 12:05

Poyraz Yilmaz

5,8671 gold badge28 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ng-bind-html on a string containing angular directive

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related