CODEWITHSUNDEEP
htmlangularjsangularjs-scope
fefe
fefe

Reputation: 9065

Angular HTML markup in scope

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>

Upvotes: 0

Views: 1598

Answers (2)

netmills
netmills

Reputation: 11

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.

Upvotes: 0

shaunhusain
shaunhusain

Reputation: 19748

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

Upvotes: 3

Related Questions