Good day,
I'm trying to translate using the directive way this portion of html
<h1>First text to translate<small>Second text to translate</small></h1>
But I encounter some difficulties. For example if I try:
<h1 translate>KEY<small>Second text to translate</small></h1>
the key will not be translated and I see it on the page and if I try:
<h1 translate="KEY"><small>Second text to translate</small></h1>
this time the key is translated but the second text disappear.
To make it work I must use the translate service inside the controller or remove the nesting. Any advice?
You can use it as a filter instead of directive:
<h1>{{'KEY' | translate}}<small>{{'Second text to translate' | translate}}</small></h1>
See https://angular-translate.github.io/docs/#/api/pascalprecht.translate.filter:translate
Related
I hvae an angular view of a pdf preview that utilizes a controller to fill the view in. I am using pdflayer then to convert the html page into a pdf. The problem however is that no matter how I try and do this the scope variable values never make it into the pdf. I am basically trying to figure out a way to capture the angular view as an html string (data already injected) so that I can pass it to pdflayer. I have tried creating a directive and used replace within the directive then collecting the DOM as a string using .HTML().
For example:
I could like this
<div id="name">{{test.name}}</div>
to become this
<div id="name">Bob Smith</div>
It inevitably however turns into this when i use $('#name').html() and then console log it
<div id="name"></div>
or
<div id="name">{{test.name}}</div>
Any help would be appreciated even if the solution is to use a different method to create the pdf. Ultimately, I need to get a angular view into a formated pdf.
Please check if below library would work for you : https://www.npmjs.com/package/angular-save-html-to-pdf
I am working on an AngularJs project and I am using the translate filter the following way:
<h2>{{'This is my text' | translate}}</h2>
It works fine, but I would like to be able to use variables in my translations. Here is what I have tried:
In the controller:
vm.text = "This {{toReplace}} is a variable.";
vm.myVariable = "random value";
In the html:
<h2>{{vm.text | translate:'{ toReplace: vm.myVariable }'}}</h2>
It doesn't replace {{toReplace}} with the content of myVariable. Instead, the page displays "This {{toReplace}} is a variable."
What should I do to make this work ?
Have you tried with the directive rather than the filter ? Something like this :
<h2 translate="vm.text" translate-values={'toReplace':vm.myVariable}"></h2>
vm.text must contain a valid translate key, which you should define in your language files. The value of the translate key will be "This {{toReplace}} is a variable.". Then your HTML should render correctly.
If you just want to render this text without internationalization support, you could just do this:
<h2>This {{vm.toReplace}} is a variable.</h2>
Here is the solution that has worked for me, considering 'myVariable' is a variable defined in my controller:
<h2 data-translate>This {{vm.myVariable}} is a variable</h2>
The tricky part is that, just like when using the translate filter, the text in the element is not the text being displayed, but the ID of the element to translate. In the translation files (po), you will have to have an element with the ID 'This {{vm.myVariable}} is a variable', including the name of the variable. If you need to display the same text but with data coming from a different variable, you would have to declare a different translation with its own ID, even though only the variable part of the text is different.
For exemple, this would have to be a different entry in the translation files:
<h2 data-translate>This {{vm.myVariable2}} is a variable</h2>
My API santizies and inputs coming in, so if I type:
Green & Blacks its saved as Green & Blacks and subsequently thats how its appearing on my website.
Now i'm using ng-repeat where that text is displayed so I have something like:
{{item.chocolate}}
My question how do i get it to display as it should be Green & Blacks.
Do i need to write a custom filter then use it like or is there some simple built in way?
Thanks.
There is no need for a filter, just use ng-bind-html on a div or other DOM object.
https://docs.angularjs.org/api/ng/directive/ngBindHtml
<div ng-bind-html="item.chocolate"></div>
Plunker: https://plnkr.co/edit/lwMAZQoBVtIfvTKtqEiP?p=preview
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>
From the linky docs it seems it should work with ng-bind-html. However, if the text contains html tags, then linky overrides the actual html interpretation to transform URLs into links.
This can be seen by for instance writing
Pretty text with some links:<br/><img src="http://something.com/lol.gif">
http://angularjs.org/,
mailto:us#somewhere.org,
another#somewhere.org,
and one more: ftp://127.0.0.1/.
in the example at the bottom of the linky docs page.
Is there a way to firstly sanitise and interpret html using ng-bind-html and only later parse the resulting text to add clickable links?