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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.