I have some special characters to show in various screens of my application so i wanted to have some way where i can handle special characters like "special char - æ &" in controller/service instead of HTML.
I know i can use
ng-bind-html
to show special characters for the example string above. However i need to show same string in multiple screens so it would make more sense for me to do it in JS. Any alternative or equivalent JS side snippet for ng-bind-html?
Note: If you have come across these kind of strings you might be knowing that they can be rendered directly with HTML but if you are using Angular JS with
{{some scope value}}
then it doesn't format special characters on it's own.
You can use $sce like so:
function myCtrl($scope,$sce){
$scope.html = $sce.trustAsHtml('HTML_CODE;');
}
And then in your HTML you use ng-bind-html to bind the content to an element.
<span ng-bind-html="html"></span>
I have an element with ng-html-bind that loads HTML content:
<p ng-bind-html="content.body"></p>
Inside this content I have one or more <code> blocks.
I would like to apply syntax highlighting only to the code tags of the loaded content, for example using angular-highlightjs directive.
Any idea on how to achieve this?
There are many ways to bind html on the page with Angular. One way is with ng-bind-html, but it's not really the best for this use case, since you also need angular-highlightjs directive to compile. You can achieve your goal with $compile like this:
/** Here, you will need to do some transformations to your html string
* 1. Add `hljs` attribute or `class="hljs"` to the `<code>` tag in any `<pre><code>`
* 2. Hopefully you already have your line breaks in place. This will result in
* a single line code block otherwise. See my plunk for how I added '\n'
*/
var myHTML = $scope.content.body;
element.append( $compile( myHTML )($scope) );
See my plunk
If I try to use both ng-sanitize's linky filter with ng-bind-html directive, it will transform initial string
Well, <b>this is bold</b>, but this should become link http://www.example.com Lets test it!
to one having link transformed to html link, but not having bold text - it will be outputed as text having tags in it.
Here's [DEMO]
My question is how do I get in result both bold text and normal html link if initialy I have just as string having some text surrounded by tags and text that looks like a link??
Plunkr Demo
You could write a custom filter to do the work of linky and put the tags back in... (this probably isn't super robust and I'm not the best at regexes, but if it works for everything you need it to, then it gets the job done.)
module.filter('linkyWithHtml', function($filter) {
return function(value) {
var linked = $filter('linky')(value);
var replaced = linked.replace(/\>/g, '>').replace(/\</g, '<');
return replaced;
};
});
Usage:
<div ng-bind-html="expr | linkyWithHtml"></div>
I have a text editor (textAngular) that I've modified to limit the number of valid HTML tags I can generate using that tool. Now, I want to only support a limited number of HTML elements (h3, h4, h5, h6, ol, ul) to produce a news story but I want to disable some of the valid HTML rendered by ng-bind-html. Namely, I want to remove , tags as a valid tags because they could have disastrous results for this user generated content.
Is it possible to remove and tags as something rendered by ng-bind-html?
Unfortunately no, it isn't possible to config the valid HTML tags.
The ng-bind-html use the $sanitize service to strip invalid tags/attributes, and you can see in the source code that all the configurations are private.
// Safe Block Elements - HTML5
var blockElements = angular.extend({}, optionalEndTagBlockElements, makeMap("address,article," +
"aside,blockquote,caption,center,del,dir,div,dl,figure,figcaption,footer,h1,h2,h3,h4,h5," +
"h6,header,hgroup,hr,ins,map,menu,nav,ol,pre,script,section,table,ul"));
// Inline Elements - HTML5
var inlineElements = angular.extend({}, optionalEndTagInlineElements, makeMap("a,abbr,acronym,b," +
"bdi,bdo,big,br,cite,code,del,dfn,em,font,i,img,ins,kbd,label,map,mark,q,ruby,rp,rt,s," +
"samp,small,span,strike,strong,sub,sup,time,tt,u,var"));
If you really want it, one way you could do is to copy the angular-sanitize.js and modify the valid HTML tags configuration directly.
Please note that if you do it that way, all the ng-bind-html in your entire application will be also affected. If that is undesired, you have to write your own custom directive and inject/use your modified version of $sanitize instead.
If you're into modifying textAngular already, you could modify something around the taCustomRenderers Section of the code and use ta-bind instead of ng-bind-html. They do nearly the same thing except ta-bind runs all the extra renderers.
Custom Renderers Code: textAngularSetup, textAngular - probably in this one you can do your stripping out of unwanted code.
I have a textarea with content populated through ng-model:
<textarea data-ng-model="messageBody"></textarea>
messageBody needs to be stored in the database using newline characters (\n) instead of line breaks. However, when I use regex to convert newline to linebreak and pass that to the model, angular escapes the HTML. Is there a way to pass the HTML directly to the model or textarea without it being converted? Or, is there a better way to convert between textarea line breaks and newline characters?
UPDATE
On further inspection, this wasn't an angular problem. We are populating the database (Postgres) using an SQL script. Turns out the strings inserted into the database weren't escaped. Since the strings contained a newline character, that means they were being inserted directly as text. Then, line break handling from the front end seemed to be producing inconsistent results from what was initially populated. Long story short - I escaped the initial database content to accommodate for the newline character, and everything works fine.
New lines inside a textarea are new lines in the resulting string (\n).
This fiddle demonstrates such behaviour.
If you want to store \n in the database, there is nothing to do, the string is already of that format.
If by 'linebreak', you mean the <br> tag and you actually meant that the string comes from the DB containing such tags, then you should replace them beforehand I suppose.
Ideally your database should contain newlines (\n), you should save and fetch newlines from it as is, no conversion.
Yes, you can do this in AngularJS with "SCE / Strict Contextual Escaping". Continue to convert the newline to a linebreaks and pass that to the model.
Then when you show the data in your template, you can use $sce.trustAsHtml() to preserve the HTML content, then ng-bind-html directive to bind it to the DOM. Here is an example of how it would appear in the controller:
myApp.controller( 'contentCtrl', [ '$scope', '$sce', function( $scope, $sce ){
$scope.messageBody = $sce.trustAsHtml( 'Hello <br> World' );
}]);
Then in your template, bind it like this:
<div ng-bind-html="messageBody"></div>
More Info on $sce here in the AngularJS Docs.