Is it possible to create an HTML fragment in an AngularJS controller and have this HTML shown in the view?
This comes from a requirement to turn an inconsistent JSON blob into a nested list of id: value pairs. Therefore the HTML is created in the controller and I am now looking to display it.
I have created a model property, but cannot render this in the view without it just printing the HTML.
Update
It appears that the problem arises from angular rendering the created HTML as a string within quotes. Will attempt to find a way around this.
Example controller :
var SomeController = function () {
this.customHtml = '<ul><li>render me please</li></ul>';
}
Example view :
<div ng:bind="customHtml"></div>
Gives :
<div>
"<ul><li>render me please</li></ul>"
</div>
For Angular 1.x, use ng-bind-html in the HTML:
<div ng-bind-html="thisCanBeusedInsideNgBindHtml"></div>
At this point you would get a attempting to use an unsafe value in a safe context error so you need to either use ngSanitize or $sce to resolve that.
$sce
Use $sce.trustAsHtml() in the controller to convert the html string.
$scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);
ngSanitize
There are 2 steps:
include the angular-sanitize.min.js resource, i.e.:
<script src="lib/angular/angular-sanitize.min.js"></script>
In a js file (controller or usually app.js), include ngSanitize, i.e.:
angular.module('myApp', ['myApp.filters', 'myApp.services',
'myApp.directives', 'ngSanitize'])
You can also create a filter like so:
var app = angular.module("demoApp", ['ngResource']);
app.filter("trust", ['$sce', function($sce) {
return function(htmlCode){
return $sce.trustAsHtml(htmlCode);
}
}]);
Then in the view
<div ng-bind-html="trusted_html_variable | trust"></div>
Note: This filter trusts any and all html passed to it, and could present an XSS vulnerability if variables with user input are passed to it.
Angular JS shows HTML within the tag
The solution provided in the above link worked for me, none of the options on this thread did. For anyone looking for the same thing with AngularJS version 1.2.9
Here's a copy:
Ok I found solution for this:
JS:
$scope.renderHtml = function(html_code)
{
return $sce.trustAsHtml(html_code);
};
HTML:
<p ng-bind-html="renderHtml(value.button)"></p>
EDIT:
Here's the set up:
JS file:
angular.module('MyModule').controller('MyController', ['$scope', '$http', '$sce',
function ($scope, $http, $sce) {
$scope.renderHtml = function (htmlCode) {
return $sce.trustAsHtml(htmlCode);
};
$scope.body = '<div style="width:200px; height:200px; border:1px solid blue;"></div>';
}]);
HTML file:
<div ng-controller="MyController">
<div ng-bind-html="renderHtml(body)"></div>
</div>
Fortunately, you don't need any fancy filters or unsafe methods to avoid that error message. This is the complete implementation to properly output HTML markup in a view in the intended and safe way.
The sanitize module must be included after Angular:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>
Then, the module must be loaded:
angular.module('app', [
'ngSanitize'
]);
This will allow you to include markup in a string from a controller, directive, etc:
scope.message = "<strong>42</strong> is the <em>answer</em>.";
Finally, in a template, it must be output like so:
<p ng-bind-html="message"></p>
Which will produce the expected output: 42 is the answer.
I have tried today, the only way I found was this
<div ng-bind-html-unsafe="expression"></div>
ng-bind-html-unsafe no longer works.
This is the shortest way:
Create a filter:
myApp.filter('unsafe', function($sce) { return $sce.trustAsHtml; });
And in your view:
<div ng-bind-html="customHtml | unsafe"></div>
P.S. This method doesn't require you to include the ngSanitize module.
on html
<div ng-controller="myAppController as myCtrl">
<div ng-bind-html-unsafe="myCtrl.comment.msg"></div>
OR
<div ng-bind-html="myCtrl.comment.msg"></div
on controller
mySceApp.controller("myAppController", function myAppController( $sce) {
this.myCtrl.comment.msg = $sce.trustAsHtml(html);
works also with $scope.comment.msg = $sce.trustAsHtml(html);
I found that using ng-sanitize did not allow me to add ng-click in the html.
To solve this I added a directive. Like this:
app.directive('htmldiv', function($compile, $parse) {
return {
restrict: 'E',
link: function(scope, element, attr) {
scope.$watch(attr.content, function() {
element.html($parse(attr.content)(scope));
$compile(element.contents())(scope);
}, true);
}
}
});
And this is the HTML:
<htmldiv content="theContent"></htmldiv>
Good luck.
Just did this using ngBindHtml by following angular(v1.4) docs,
<div ng-bind-html="expression"></div>
and expression can be "<ul><li>render me please</li></ul>"
Make sure you include ngSanitize in the module's dependencies.
Then it should work fine.
Another solution, very similar to blrbr's except using a scoped attribute is:
angular.module('app')
.directive('renderHtml', ['$compile', function ($compile) {
return {
restrict: 'E',
scope: {
html: '='
},
link: function postLink(scope, element, attrs) {
function appendHtml() {
if(scope.html) {
var newElement = angular.element(scope.html);
$compile(newElement)(scope);
element.append(newElement);
}
}
scope.$watch(function() { return scope.html }, appendHtml);
}
};
}]);
And then
<render-html html="htmlAsString"></render-html>
Note you may replace element.append() with element.replaceWith()
there is one more solution for this problem using creating new attribute or directives in angular.
product-specs.html
<h4>Specs</h4>
<ul class="list-unstyled">
<li>
<strong>Shine</strong>
: {{product.shine}}</li>
<li>
<strong>Faces</strong>
: {{product.faces}}</li>
<li>
<strong>Rarity</strong>
: {{product.rarity}}</li>
<li>
<strong>Color</strong>
: {{product.color}}</li>
</ul>
app.js
(function() {
var app = angular.module('gemStore', []);
app.directive(" <div ng-show="tab.isSet(2)" product-specs>", function() {
return {
restrict: 'E',
templateUrl: "product-specs.html"
};
});
index.html
<div>
<product-specs> </product-specs>//it will load product-specs.html file here.
</div>
or
<div product-specs>//it will add product-specs.html file
or
<div ng-include="product-description.html"></div>
https://docs.angularjs.org/guide/directive
you can also use ng-include.
<div class="col-sm-9 TabContent_container" ng-include="template/custom.html">
</div>
you can use "ng-show" to show hide this template data.
here is the solution make a filter like this
.filter('trusted',
function($sce) {
return function(ss) {
return $sce.trustAsHtml(ss)
};
}
)
and apply this as a filter to the ng-bind-html like
<div ng-bind-html="code | trusted">
and thank to Ruben Decrop
Use
<div ng-bind-html="customHtml"></div>
and
angular.module('MyApp', ['ngSanitize']);
For that, you need to include angular-sanitize.js,
for example in your html-file with
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-sanitize.js"></script>
Here's a simple (and unsafe) bind-as-html directive, without the need for ngSanitize:
myModule.directive('bindAsHtml', function () {
return {
link: function (scope, element, attributes) {
element.html(scope.$eval(attributes.bindAsHtml));
}
};
});
Note that this will open up for security issues, if binding untrusted content.
Use like so:
<div bind-as-html="someHtmlInScope"></div>
Working example with pipe to display html in template with Angular 4.
1.Crated Pipe escape-html.pipe.ts
`
import { Pipe, PipeTransform } from '#angular/core';
import { DomSanitizer } from '#angular/platform-browser';
#Pipe({name : 'keepHtml', pure : false})
export class EscapeHtmlPipe implements PipeTransform{
constructor(private sanitizer : DomSanitizer){
}
transform(content){
return this.sanitizer.bypassSecurityTrustHtml(content);
}
}
`
2. Register pipe to app.module.ts
import {EscapeHtmlPipe} from './components/pipes/escape-html.pipe';
declarations: [...,EscapeHtmlPipe]
Use in your template
<div class="demoPipe" [innerHtml]="getDivHtml(obj.header) | keepHtml">
getDivHtml() { //can return html as per requirement}
Please add appropriate implementation for getDivHtml in associated component.ts file.
Just simple use [innerHTML], like below:
<div [innerHTML]="htmlString"></div>
Before you needed to use ng-bind-html...
My server has a json endpoint that returns a html/js string, looks similar to such:
"\r\n\r\n<div id=\'myEditor\" name=\"myEditor\">\r\n\r\n\t\t\r\n\t</div>\r\n\r\n\r\n\r\n\r\t<script type=\"text/javascript\" src=\"/MyEditor/WebResource.axd?...\:">\r\n\r\n\t<script>\r\n\t..."
I want to inject this with angular into a div, and have it execute the javascript as well.
First attempt:
function myCtrl ($sce) {
$http.get(endpoint).then(function (response) {
$scope.html = response.data;
$scope.editorHtml = $sce.trustAsHtml($scope.html); //also tried trustAsJs
}
}
html:
<div ng-bind-html="editorHtml"></div>
I noticed that if I return a pure html string those tags get rendered, however a pure javascript tags do NOT get evaluated. How do I get it to evaulate these tags? AngularJS version 1.5.8. Thanks!
Your HTML has some syntax problem such id=\'myEditor\". I replaced it with id=\'myEditor\' and so ...
Check this jsfiddle
Add angular.min.js and angular-sanitize.min.js to your project. I used jquery 2.2.4 for this sample.
HTML:
<div ng-app="myApp">
<div ng-controller="myCtrl">
<h2>{{html}}</h2>
<span>{{greeting}}</span>
<div ng-bind-html="editorHtml"></div>
</div>
</div>
JS:
var myApp = angular.module('myApp', ['ngSanitize']);
var data = "\r\n\r\n<div id=\"myEditor\" name=\"myEditor\">\r\n\r\n\t\thi html\r\n\t</div>\r\n\r\n\r\n\r\n\r\t";
var script = "<script type=\"text/javascript\"> alert('hi script');\r\n\r\n\t</" + "script>\r\n\t";
myApp.controller('myCtrl', ['$sce', '$scope' , function($sce, $scope) {
$scope.html = data + script;
$scope.editorHtml = $sce.trustAsHtml($scope.html);
$scope.greeting = 'Hola!';
}]);
You have to include jQuery for this to work. Also don't forget ngSanitize.
Plunker
http://plnkr.co/edit/zEXXCB459Tp25VJiyyZb?p=preview
I wanted to implement AngularJS in MVC4. How will I return JSON in the format of angular in mvc4.
Here are my codes:
Controller:
[HttpGet]
public ActionResult sample1()
{
return Json(db.Account_Info.ToList(), JsonRequestBehavior.AllowGet);
}
Account.js
App.controller('Account', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout)
{
$scope.bag = [];
$scope.alldata = function ()
{
//
$http.get('/Accounts/sample1').then(function ($response)
{
$scope.bag = $response;
});
}
//execute on the page load
$timeout(function ()
{
$scope.alldata();
});
}]);
App.js
var App = angular.module('MyApp', []);
View:
<script src="~/Scripts/angular/angular.min.js"></script>
<script src="~/Scripts/angular/App.js"></script>
<script src="~/Scripts/angular/Account.js"></script>
<h2>sample</h2>
<div ng-app="MyApp" >
<div ng-controller="Account">
<div ng-repeat="acc in bag">
<p>Username: {{acc.username}}</p>
</div>
</div>
</div>
Now, I've got this error:
A circular reference was detected while serializing an object of type 'System.Data.Entity.DynamicProxies.Account_Info_D9C702CA15FC076225862589F60CD5E8B8EA615EF98D78A1FEB764E267D88F97'.
Return data from the controller:
Need advice and help. Thanks in advance.
Use the .net javascript serializer like so:
return new JavaScriptSerializer().Deserialize<List<Account_Info>>(db.Account_Info.ToList());
Deserialize takes a generic. Check your model type. I assumed it was a list of Account_Info.
You are dealing with 2 different issues.
Right now, your controller method is not working - therefore you Angular code will not work as expected.
On the server side, you are seeing an error when you try to serialize your object to JSON. It would help to add something like the Newtonsoft JSON serializer.
The controller method would then look something like this:
[HttpGet]
public ActionResult sample1()
{
var result = Newtonsoft.Json.JsonConvert.SerializeObject(db.Account_Info.ToList(),
new Newtonsoft.Json.JsonSerializerSettings
{
ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Serialize
});
return Json(result, JsonRequestBehavior.AllowGet);
}
Once you are actually returning values from your controller then you will need to test your angular code to see if it is working.
I am using an example from this - fiddle . What I am trying to achieve it to dynamically populate the date in my Angular's ng-repeat. The example is a working example but it is not working with data-binding. Below are my code:
JS
.directive('markdown', function () {
var converter = new Showdown.converter();
return {
restrict: 'A',
link: function (scope, element, attrs) {
console.log(element.text()); //Prints out {{post.article}}
var htmlText = converter.makeHtml(element.text());
element.html(htmlText);
}
};
})
HTML
<div ng-repeat="post in posts">
<div markdown>{{post.article}}</div> <!-- Output: ##Testing -->
<div markdown>**Testing**</div> <!-- Output: <strong>Testing<strong>-->
</div>
In the comment of that code is the result. The first output didn't went as expected. What have I done wrong here or am I missing something?
Note from Console
outerHTML: "<div markdown="" class="ng-binding"><p>{{post.article}}</p></div>"
outerText: "{{post.article}}↵↵"
outerHTML: "<div markdown=""><strong>Testing</strong></div>"
outerText: "Testing↵"
Note: Check the comment out in the JS, console.log(element.text());
Found an alternative to my solution:
included Angular Sanitize Js and Markdown Converter Js
JS
$scope.converter = new Markdown.Converter();
$scope.convert = function(markdown) {
return $scope.converter.makeHtml(markdown);
}
HTML
<div ng-bind-html="convert(post.article)"></div>
How do i decode HTML entity in text using angular JS.
I have the string
""12.10 On-Going Submission of ""Made Up"" Samples.""
I need a way to decode this using Angular JS. I found a way to do that using javascript here but I am sure thats wont work for Angular. Need to get back the original string on the UI which would look like
""12.10 On-Going Submission of ""Made Up"" Samples.""
You can use the ng-bind-html directive to display it as an html content with all the html entities decoded. Just make sure to include the ngSanitize dependency in your application.
DEMO
JAVASCRIPT
angular.module('app', ['ngSanitize'])
.controller('Ctrl', function($scope) {
$scope.html = '"12.10 On-Going Submission of ""Made Up"" Samples."';
});
HTML
<body ng-controller="Ctrl">
<div ng-bind-html="html"></div>
</body>
If you don't want to use ngSanitize, you can do it this way:
in your controller:
$scope.html = '"12.10 On-Going Submission of ""Made Up"" Samples."'
$scope.renderHTML = function(html_code)
{
var decoded = angular.element('<textarea />').html(html_code).text();
return $sce.trustAsHtml(decoded);
};
And in the template:
<div ng-bind-html="renderHTML(html)"></div>
Just make sure you inject $sce in your controller
I have similar issue, but don't need to use result value on UI. This issue was resolved by code from angular ngSanitize module:
var hiddenPre=document.createElement("pre");
/**
* decodes all entities into regular string
* #param value
* #returns {string} A string with decoded entities.
*/
function decodeEntities(value) {
if (!value) { return ''; }
hiddenPre.innerHTML = value.replace(/</g,"<");
// innerText depends on styling as it doesn't display hidden elements.
// Therefore, it's better to use textContent not to cause unnecessary reflows.
return hiddenPre.textContent;
}
var encoded = '<p>name</p><p><span style="font-size:xx-small;">ajde</span></p><p><em>da</em></p>';
var decoded = decodeEntities(encoded);
document.getElementById("encoded").innerText=encoded;
document.getElementById("decoded").innerText=decoded;
#encoded {
color: green;
}
#decoded {
color: red;
}
Encoded: <br/>
<div id="encoded">
</div>
<br/>
<br/>
Decoded: <br/>
<div id="decoded">
</div>