Here's what i'm trying to do:
I have a string with html and ionic elements in my .ts file:
page_content = "<ion-card class='card-ios'><ion-card-header>Header</ion-card-header><ion-card-content>Card Content</ion-card-content></ion-card>"
then i want to inject that string in a div in the html page:
<ion-content padding class="home">
<div [innerHTML]="sanitizer.bypassSecurityTrustHtml(page_content)">
</div>
</ion-content>
the problem is that the style of the card is not applied to the content, if i insert the code directly in the html it shows fine.
with innerHTML
inserted directly
Thanks in advance.
Related
While using ngsanitize. It displays only html without css applied.
For example:
The above image should be the output but using ngsanitize ,it displays only the text
What could be added with ngsanitize to display elements with proper css.
<p ng-bind-html ="the text to be displayed(test video)"></p>
if i understood your question correctly, fiddle
you can use $sce.trustAsHtml(), to use inline style directly into the html string, you could do it like this, controller:
$scope.trustAsHtml = function(string) {
return $sce.trustAsHtml(string);
};
And in HTML
<div data-ng-bind-html="trustAsHtml(htmlString)"></div>
Please try with $sce. Before binding it to the scope variable that you use for ng-bind-html. An example below
<p ng-bind-html ="styledHTML"></p>
And in your controller
$scope.styledHTML = $sce.trustAsHtml('<span style="background-color: cyan;">test video</span>');
I have two pieces of HTML I need to output the first is an opening tag of a div that represents my header, the second is the closing tag of the div that will represent the footer. Between the two I have dynamic content that I cannot control. I want headerHTML to include the opening div and CSS class and the footer to close the header div to wrap all the content that will be in between.
<ng-bind-html ng-bind-html="headerHTML" />
<ng-bind-html ng-bind-html="footerHTML" />
So after render it should look like:
<div class="myCSSClass">
A bunch of dynamic content created between the two binds
</div>
However, what happens is this:
<div class="myCSSClass">
</div>
A bunch of dynamic content created between the two binds
<div>
</div>
The problems is that it is auto adding the closing tag for the headerHTML when its not part of the content. This causes the page to render incorrectly. Is there another way to inject HTML content without it adding closing tag?
Under the hood, the ng-bind-html directive uses Node.appendChild. This means that it must attach a complete element. If the HTML omits a closing tag, the browser has to close the element. This is the way the DOM works. The browser can't split opening and closing tags between two .appendChild operations.
To do what you want, use a component that transcludes contents:
app.component("myComponent", {
bindings: {
headerHtml: '<',
footerHtml: '<',
},
template: `
<div class="myCSSClass">
<div ng-bind-html="$ctrl.headerHtml"></div>
<div ng-transclude></div>
<div ng-bind-html="$ctrl.footerHtml"></div>
</div>
`,
transclude: true
});
Usage:
<my-component header-html="headerHTML" footer-html="footerHTML">
This content will be sandwiched between header and footer.
</my-component>
For more information, see
AngularJS ng-transclude Directive API Reference.
AngularJS Directive Definition Object API Reference - transclude
I'm using ionic framework to develop an app.
I have an abstract state, with some html as "header" and an ion-nav-view. This is the template:
<div class="list">
<div class="item range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
</div>
</div>
<ion-nav-view name="lesson-content"></ion-nav-view>
It works fine, but the div with list class it's fixed on the top, I want it to scroll together with the content of ion-nav-view.
If I try to wrap them on ion-content, the content of ion-nav-view gets cropped.
Any ideas? Thank you guys!
You need to remove the header from the index.html and add a custom header inside the ion-view. Works for me
I use {{message}} in template HTML.
This code shows HTML as text in page.
How I can show only one HTML tag <a href> as HTML in page?
if have included ng-sanitize (doc) as dependency you could its directive "ng-bind-html" to sanitize your HTML-strings
<div ng-bind-html="message">
I am having a form html as follows:
<div class=\"container\">\r\n\t<div class=\"clearfix row
\">\r\n\t\t<div class=\"col-md-12 column\">\r\n\t\t\t<h3>\r\n\t\t\t\tNew form created\r\n\t\t\t<\/h3
>\r\n\t\t\t<div class=\"form-group\">\r\n\t\t\t\t <label><strong>Enter name<\/strong><\/label><input
name=\"1430985388220267#enter_name\" id=\"1430985388220267\" class=\"form-control\" grid-name=\"Enter
name\" type=\"text\" \/>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/div>
This form i want to display in mobile app. The mobile app i have developed in ionic framework and cordova with angular JS. When i am trying to show the form as html then it is getting rendered with basic elements like header, bold, labels like content but the input tag it is not showing or else i can say the html's basic data input elements like checkbox, radio button etc are not displayed. I am doing this in the view:
<ion-view title="Fill the Form">
<ion-content class="padding-vertical" ng-repeat="htmlValue in HTML">
<div ng-bind-html="getHtml(htmlValue)">
</div>
{{htmlValue}}
<div class="clearfix"></div>
</ion-content>
</ion-view>
my getHtml function is this:
$scope.getHtml = function(html){
var trusted = $sce.trustAsHtml(html);
return trusted;
};
i have also modified:
angular.module('iot', ['ionic','chart.js','ngSanitize'])
I am pushing the code from REST response into array called HTML
but still i am not getting the expected output what else has remained in this case? Any help would be truly appreciated.
Use filter:
// Filter to enable HTML tags
app.filter('unsafe', function ($sce) {
return function (val) {
return $sce.trustAsHtml(val);
};
});
Then include this within your HTML tag along with filter ('unsafe' in this case), for example:
<!-- i.detail will be your valuable -->
<div ng-bind-html="i.detail | unsafe"></div>