AngularJS: Insert HTML from a string
Have a look at the example in this link :
http://docs.angularjs.org/api/ngSanitize.$sanitize
Basically, angular has a directive to insert html into pages. In your case you can insert the html using the ng-bind-html directive like so :
If you already have done all this :
// My magic HTML string function.
function htmlString (str) {
return "<h1>" + str + "</h1>";
}
function Ctrl ($scope) {
var str = "HELLO!";
$scope.htmlString = htmlString(str);
}
Ctrl.$inject = ["$scope"];
Then in your html within the scope of that controller, you could
<div ng-bind-html="htmlString"></div>
How to add html in angularjs coming in string format?
You can use ng-bind-html for this.
angular.module("app",[]).controller("ctrl",function($scope){
$scope.htmlData = "<br>Rom<br>Jay Clayton<br>Rom roy<br>"; $scope.getStudentsNames = function(){ return this.htmlData; }
}).filter('to_trusted', ['$sce', function($sce) { return function(text) { return $sce.trustAsHtml(text); };}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<span ng-app="app" ng-controller="ctrl" class="tooltiptext" ng-bind-html="getStudentsNames() | to_trusted"></span>
angularjs string variable to html element
Use ng-bind-html
!
Here is the docs-page for ng-bind-html
. This will help you.
https://docs.angularjs.org/api/ng/directive/ngBindHtml
ng-bind-html
will render your html-string in the browser.
Perhaps you have to "trust" your html string like here: http://erikaugust.com/thoughts/ng-bind-html/
Insert html using angularjs between div tags
I'm tad bit confused regarding your issue, but when I need to inject dynamic HTML I use the following directive:
app.directive('dynamic', ['$compile', function ($compile) {
return {
restrict: 'A',
replace: true,
link: function (scope, ele, attrs) {
scope.$watch(attrs.dynamic, function (html) {
ele.html(html);
$compile(ele.contents())(scope);
});
}
};
}]);
In my Angular controller I save the HTML string to a scope variable
var $scope.myScopeVariable = '<div>My HTML Goes HERE</div>';
, and in my html page, I use:
<div dynamic = "myScopeVariable">
Hopefully, this will help you.
Insert HTML into view from AngularJS controller
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'])
AngularJs: Display HTML elements from string variable in JSP page
Use AngularJs ng-bind-html
directive to render HTML.
( Docs )
<div class="panel-body" ng-bind-html="myvar"></div>
Pass html string in controller and put into .html (angular js)
Lets try angular way
<td width="20%">
<button type="button" class="btn btn-primary" ng-click="getData(data)"><i class="fa fa-edit"></i> Edit</button>
<button ng-show="item.active" type="button" class="btn btn-default"><i class="fa fa-toggle-on"></i> On</button>
<button ng-hide="item.active" type="button" class="btn btn-default"><i class="fa fa-toggle-off"></i> Off</button>
</td>
Related Topics
What Is the Functionality of !Doctype
Css3 Border-Radius Clipping Issues
How to Specify a Starting Number for an Ordered List
Why Does Margin-Top Work With Inline-Block But Not With Inline
Text Overflow Ellipsis on Two Lines
How to Tell If a Browser Is in "Quirks" Mode
Two Inline-Block, Width 50% Elements Wrap to Second Line
Make an Image Responsive - the Simplest Way
Is the 'Type' Attribute Necessary For ≪Script≫ Tags
Use CSS Gradient Over Background Image
How to Add Google Chrome Omnibox-Search Support for Your Site