I have this key/value in a Json file to use in angular-translate:
{"MEETING_LINK": "<br/>Maybe you want to see the <a class=\"pink-link\" ng-href=\"/{{meetingLink}}/{{meetingId}}\">full meeting<a/> first?"}
When I invoke the translate in my html like this:
<span
ng-bind-html="'GLOBAL.REMOVE_MODAL.MEETING_LINK' | translate:
{ meetingLink: meetingData.buttonLink, meetingId: meetingData.id}">
</span>
It does not work. But if I replace the ng-href in the anchor:href="/{{meetingData.buttonLink}}/{{meetingData.id}} It works.
Besides I want to add a ng-click to the anchor element, I guess angular directives in the html do not work.
Can I do some trick to make this happen?
Try adding translate-compile to your span if you're using angular-translate 2.x.
Related
I was wondering how can I substitute doing something like this from AngularJS to Angular:
<li ng-repeat="node in ctrl.nodeTree" ng-include="'nodes_renderer.html'"></li>
I have been trying to do this, but I am not sure it is the right way as it not working and Angular is not complaining.
<li *ngFor="let node of nodeTree">
<nodes-renderer></nodes-renderer>
</li>
So I am trying to make my own custom tag from nodes_renderer.html but I want some input on which way would be better to achieve this.
It is important to mention that my "< li >" tag is being used inside another custom "component" element tag that I have created only with css (so it doesn't have a template) in a Hybrid AngularJS-Angular app, where I am downgrading Angular components.
Hi I have an Angular2 app, and in one of the components I have an attribute that I want to display. The problem I have is that I'm using Pug as my template engine and the attribute I'm trying to display contains HTML tags, how can I get Pug to interpret this code as its own syntax?
So for example I try to display something like this in my template:
p {{attribute}}
Where attribute is something like this:
<h2>Sample Text.</h2>
I've tried this p #{attribute} but it doesn't work.
Turns out it wasn't a Pug problem and had to be resolved with Angular2 by adding [innerHtml] to the element:
p([innerHtml]="attribute")
I have a dynamic Url, and in my html i want to do something like this:
<a onclick="location.href='myVariable';"><span>Click here</span></a>
This spells out the word 'myVariable' in the URL instead of using the value of my variable. I have also tried:
<a onclick="location.href='{{myVariable}}';"><span>Click here</span></a>
I used the brackets since my application is using angularJS, but that doesn't work either.
Is there a way to do this in HTML? Rather than using an onclick javascription function?
Any help is appreciated!
Try this:
<a ng-href="{{myVariable}}"><span>Click here</span></a>
You don't have to use an onclick event when clicking on an "a"-tag. The tag is used to hyperlink to another page. Use this:
<a href='myVariable'><span>Click here</span></a>
And if you´re changing the url, perhaps you should add a slash before 'myVariable':
<a href='/myVariable'><span>Click here</span></a>
It's possible to use property as HTML tag name?
Something like this or similar:
<{{property.name}}>Hello world</{{property.name}}>
That's not supported. Tags and attributes used as component or directive selector need to be added statically.
If you want to add components dynamically you can use ViewContainerRef.createComponent like demonstrated in Angular 2 dynamic tabs with user-click chosen components
no you can use like this
<label>{{property.name}}</label>
or
<htmltag>{{property.name}}</htmltag>
Lets suppose I want to print the following html:
<a href..?> </a>
and I have it inside some expression.
how can I print it so it will be clickable using {{x.something}} in angular js ng-repeat?
You can do 1 of 2 things.
Use $sce service with the ng-bind-html attribute. $sce requires that you call $sce.trustAsHtml() around the html content before binding to the UI.
Use ngSanitize (by adding it as a dependent module) and then use ng-bind-html