Angular HTML markup in scope

Question

Maybe is a stupid question but I'm really new with Angular and trying to pick up some knowledges. So I have a scope which I get via API ($http) and after conversion is a html markup

<li>some list</li>

and I would like to project this one in DOM, trying

<ul>{{myscopevariable}}</ul>

but I get just the raw text

with php would be like <ul><?= myscopevariable ?></ul>

When modifying the DOM using angular you generally use directives. If you just want to include some snippet of HTML you can use ng-bind-html (need to include angular-sanitize.js and "ngSanitize" dependency) on an element, another directive that may be helpful is ng-include. Alternatively if none of the existing directives achieve the goal you can write your own. I'll see if I can throw together an answer here. Check out egghead.io and YouTube AngularJS Best Practices videos for some ramp up info. — shaunhusain
– shaunhusain, Commented Mar 20, 2014 at 18:22
Thank u for this nice advice I will check my dependencies. An example would be really appreciated as well. Thanks again — fefe
– fefe, Commented Mar 20, 2014 at 18:25

shaunhusain · Accepted Answer · 2014-03-20 18:26:40Z

3

JS

angular.module("myApp", ["ngSanitize"]).controller("MyCtrl", function($scope){
  $scope.someHTML = "<li>just testing</li>";
})

HTML

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular-sanitize.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="MyCtrl">
    <h1>Hello Plunker!</h1>
    <ul ng-bind-html="someHTML">
    </ul>
  </body>

</html>

http://plnkr.co/edit/e1zoOrEVwqdIDPujMpPC?p=preview

answered Mar 20, 2014 at 18:26

shaunhusain

19.7k4 gold badges41 silver badges53 bronze badges

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

8 Comments

fefe Over a year ago

I think i'm going to love angular!

shaunhusain Over a year ago

fefe indeed have to admit I've become quite a fan boy and I generally don't like them :) I still am not a huge fan of JS but the framework makes it far more appealing to me. Just FYI as well generally speaking it's frowned upon to do DOM manipulation in your controller since it then means you can't test the controller independent of the view (it becomes coupled) so try to avoid it and use directives if you need to do DOM manipulation.

fefe Over a year ago

okay I will try to pick up some more info is starting to be interesting

fefe Over a year ago

one thing can I ask regarding to this?

shaunhusain Over a year ago

Sure shoot conversations in SO are frowned upon as well but if it's pertinent to the question it's fine, if not post another question.

|

netmills · Accepted Answer · 2014-03-20 18:45:33Z

0

Use the ng-bind-html directive (Documentation here). Prior to 1.2 there also existed ng-bind-html-unsafe.

In your example:

<ul>some list</list>
  <li ng-bind-html='myscopevariable'></li>
  ....
</ul>

You have to include the ngSanitize module to have it work (e.g. <script src="http://code.angularjs.org/1.2.14/angular-sanitize.js"></script> in Header and var app = angular.module('plunker', ['ngSanitize']);)

See this plunker example for some working code.

answered Mar 20, 2014 at 18:45

netmills

112 bronze badges

Collectives™ on Stack Overflow

Angular HTML markup in scope

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related