2

I am trying to add something like dynamic HTML using ng-bind-html but its not working with $scope variable

Here is my Angular code

1)My controller 

$scope.name = "Parshuram" $scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml("<div>{{name}}</div>");

Also that my string is dynamic

"<div><table class=" + "\"table table - bordered table - responsive table - hover add - lineheight table_scroll\"" + "><thead><tr><td>Name</td><td>Age</td></tr></thead><tbody><tr ng-repeat=" + "\"tr in dyna\"" + "><td>{{tr.name}}</td><td>{{tr.age}}</td></tr></tbody></table></div>"

So i cant replace every variable with $scope

2)- My HTML 

<div ng-app="mymodule" ng-controller="myModuleController"> <div ng-bind-html="thisCanBeusedInsideNgBindHtml"></div> </div>

I got this output

{{name}}

My expected output is

Parshuram

Please can anyone help i am stuck at this point,does that $sce does not bind scope variable?? ..

Improve this question
7
  • If you're getting that html from a server, and can make the server return a response which is exactly the html you want, then just use ng-include="'//theserver/somepage'" and that will fetch the html and include it as a template. Commented Nov 24, 2016 at 15:59
  • can you explain that in detail this is my service with returns html string Commented Nov 24, 2016 at 16:06
  • $http.get('localhost:22475/api/mymodule').then(function (response) { console.log(response.data);}); Commented Nov 24, 2016 at 16:06
  • 1
    Try this: $scope.template = '//localhost:22475/api/mymodule'; then in the html <div ng-include="template"></div> Commented Nov 24, 2016 at 16:31
  • @Duncan its so simple thanku for that,it worked..One question can i give a query parameter to that API??? //localhost:22475/api/mymodule?dt = 4 Commented Nov 25, 2016 at 5:44

5 Answers 5

Reset to default
6

I've created a working plnkr here: https://plnkr.co/edit/uOdbHjv1B7fr0Ra1kXI3?p=preview

the problem is that ng-bind-html is not bound to the scope. you should manually compile the content.

a valid and reusable solution should be creating a directive, whitout using any external modules.

function compileTemplate($compile, $parse){ return { link: function(scope, element, attr){ var parsed = $parse(attr.ngBindHtml); function getStringValue() { return (parsed(scope) || '').toString(); } scope.$watch(getStringValue, function() { $compile(element, null, -9999)(scope); }); } } } <div ng-app="mymodule" ng-controller="myModuleController"> <div ng-bind-html="thisCanBeusedInsideNgBindHtml" compile-template></div> </div>
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

No this is also not working for me still giving {{name}}
i've added a working plnkr in my answer starting from your code.
Wowww thanku it worked perfectly,i think i was making mistake in directive,but thanku you very much..
fantastic answer, but what if the html you are binding to has a directive in it, is there an easy way to do this recursively? e.g. <div ng-bind-html="myhtml"> where myhtml = "<my-directive></my-directive>" produces <div><my-directive></my-directive></div> rather than the inner directive being compiled and correctly rendered
recursive possible simply by changing the maxPriority value.
0

ng-bind-html does what it says on the tin: it binds html. It doesn't bind angular template code into your dom.

You need to do this instead:

$scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml("<div>"+$sanitize(name)+"</div>");

To do this you'll want to include the module ngSanitize from the javascript angular-sanitize.js. See https://docs.angularjs.org/api/ngSanitize

If you want to insert some html that includes angular directives then you should write your own custom directive to do it.

Improve this answer

3 Comments

Do i need to add sanitize.min.js for it??
You would need angular-sanitize, but really you should consider whether you can do what you need with a custom directive (or component) instead.
I am sending a string from my server,so cant prefer a directive
0

In your html just use {{name}} The {{var}} notation is to be used in the HTML code to evaluate that variable.

Improve this answer

1 Comment

No i dont want to use in html my HTML string is coming from my server and i want to bind it with html
0

You can do : 

$scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml('<div ng-bind="name"></div>');
Improve this answer

5 Comments

my question is how i can bind my scope variable with $sce html-bind
please check my question i want my scope variable to bind because i am sending a string from my server and binding it with html , if any other way so that i can send some string and change my name as scope variable changes but i want to send string html
I am having difficulties reading you I'm sorry, I edited my question to cope with your needs, see the last part of it.
I completely edited my question now, this way we are on the same page !
Can you then try $scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml('<span ng-bind="name"></span>'); ?
0

Sorry I make another answer.

If you have 

$scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml("<div>{{name}}</div>");

Then you can do

var str = "<div>{{name}}</div>"; var output = str.replace('{{name}}', $scope.name);

It seems to be the only option.

Improve this answer

1 Comment

Sorry i cant use replace here my html string can be anything suppose for eg this "<div><table class=" + "\"table table - bordered table - responsive table - hover add - lineheight table_scroll\"" + "><thead><tr><td>Name</td><td>Age</td></tr></thead><tbody><tr ng-repeat=" + "\"tr in dyna\"" + "><td>{{tr.name}}</td><td>{{tr.age}}</td></tr></tbody></table></div> so i cant replace every variable

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.