Angularjs: Insert HTML from a String

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:

  1. include the angular-sanitize.min.js resource, i.e.:

    <script src="lib/angular/angular-sanitize.min.js"></script>
  2. 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



Leave a reply



Submit