Hi i'm creating a Harvard Reference Generator using AngularJS ive got it working perfectly, i can get it to create the full reference however i need one section to be styled in italics, the information is captured using a form. I require a little help with the output.
Current Output Code:
{{
book_author+" "+book_multiple_authors+" ("+book_year+").
"+book_title+".
"+book_place+":
"+book_publisher+".
"+ book_edition
}}.
What i need is for one section "book_title" to be shown in italics
I have tried:
{{
book_author+" "+book_multiple_authors+" ("+book_year+").
<i>"+book_title+".</i>
"+book_place+":
"+book_publisher+".
"+ book_edition
}}.
{{
book_author+" "+book_multiple_authors+" ("+book_year+").
"+<i>book_title</i>+".
"+book_place+":
"+book_publisher+".
"+ book_edition
}}.
{{
book_author+" "+book_multiple_authors+" ("+book_year+").
"<i>+book_title+</i>".
"+book_place+":
"+book_publisher+".
"+ book_edition
}}.
Nothing seems to work, i cant find any further reference to formatting the angularjs output specific to one section. What am i missing, any help would be greatly appreciated. That You.
To have HTML rendered within ng expressions, you need to use ngSanitize or $sce dependency. Else, HTML will be rendered as string inside your expressions.
In your case, you can simplify it by breaking it down to multiple elements:
<span ng-bind="book_author"></span>
<span ng-bind="book_multiple_authors"></span>
<span ng-bind="book_year"></span>
<i>
<span ng-bind="book_title"></span>
</i>
<span ng-bind="book_place"></span>
<span ng-bind="book_publisher"></span>
<span ng-bind="book_edition"></span>
Code between double curly braces in AngularJS is meant to be JavaScript, so it can't contain HTML tags. The way around it would be along these lines:
{{book_author+" "+book_multiple_authors
+" ("+book_year+"). ";}}
<i>{{book_title}}</i>
{{" "+book_place+": "+book_publisher
+". "+book_edition;}}
Let me know if this works for you, if not we can try CSS instead to render text in italics.
Best wishes,
Lukasz
Related
I'm working on my own personal portfolio and I have my social media saved as a template to just pull from using this code in React.
{this.state.contact.map((contact, index) =>
<a className="social-icons" href={`${contact.href}`} target="_blank" rel="noopener noreferrer" key={index}>
<h3 className={`ion-social-${contact.title}`}></h3>
</a>
)}
I'm trying to create the same effect while using Vue for the ion-social-icons but I'm having a hard time figuring out how to implement it as I just receive an error talking about using v-bind:class that doesn't help much. This is what I'm currently trying.
<p class="social-media snippet ion-social-{{social.title}}" v-for="social in socials" v-bind:key="social">
{{ social.title }}
</p>
I'm relatively new to Vue also.
The error you get is:
Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.
For example, instead of <div class="{{ val }}">, use <div :class="val">.
Off the top of my head, there are 3 ways to set an html attribute in Vue.
You want to set a string literal. Just write it as if you were writing regular HTML.
class="myClass". You cannot interpolate javascript here, which is what you're trying to do and what Vue was warning about.
You want to use a javascript variable defined in your component. Use v-bind.
v-bind:class="myClassVariable"
Same as above, where : is just a shortcut for v-bind.
:class="myClassVariable"
A working example of your class binding looks like this,
<p class="social-media snippet" :class="'ion-social-'+social.title" ...
The value inside :class="..." is simply an expression, where 'ion-social' is a string literal that's appended with the variable social.title. Once your template gets messy, which imo it is now, you should remove logic from your template and put it inside the component.
Using interpolations in HTML attributes was possible in Vue 1.0, but is no longer supported since 2.0. Here, you need to use v-bind, then add the variable with the string like you would in JS.
<p
v-for="social in socials"
v-bind:class="'social-media snippet ion-social-' + social.title"
v-bind:key="social"
>
{{ social.title }}
</p>
I'm back on an old AngularJS project (1.7.2) with angular-translate and I'm struggling with ng-bind-html.
In my HTML I wrote this
<span ng-bind-html="'LEFT_PANEL.VISITED_AFTER' | translate"></span>
The result I'm expecting is
<span>Visited <strong>after</strong> this date. </span>
What I have in my translation file is:
"VISITED_AFTER": "Visited <strong>after</strong> this date"
What I actually get is:
<span ng-bind-html="'LEFT_PANEL.VISITED_BEFORE' | translate" class="ng-binding ng-scope">
Visited <strong>before</strong> this date
</span>
What am I doing wrong ?
(yes I have ngSanitize in my modules)
Thanks
NgTranslate is using it's own Sanitizer (Docs)
To change the sanitize strategy globally use $translateProvider.useSanitizeValueStrategy("STRATEGY");
If you only want to have a different strategy for this element use the attribute translate-sanitize-strategy
Possible duplicate of this.
Seems to have to do with HTML decoding.
Add this function:
function decodeHtml(html) {
var txt = document.createElement("textarea");
txt.innerHTML = html;
return txt.value;
}
And surround what you're printing with: decodeHtml(...)
Actually just look at this plunkr
I am in the process of internationalizing a website and have come across a sticking point with angular-translate.
Suppose I have a translationProvider for english supplying the following text:
"example.message": "I need a {{link}} or {{customDirectiveOutput}} to render directives in me"
"link.text": "this link"
I am now trying to get some HTML into those two placeholders by doing something like the following:
<div translate="example.message"
translate-values="{
link: '<a ui-sref=\'stateName\'>{{ \'link.text\' | translate }}</a>'
customDirectiveOutput: '<span my-custom-directive=\'vm.object\'></span>'
}">
</div>
Where ui-sref is from the ui-router and adds an attribute like href="/path/to/my/state", and my-custom-directive places inner html inside the span sort of like this:
<span my-custom-directive='vm.object'>
<span class='foo'>{{vm.object.foo}}</span>
<span class="bar">{{vm.object.bar}}</span>
</span>
The link tag I can "cheat" around by just hard-coding the href onto the a tag and that isn't so bad to duplicate the /path/to/state, though I'd prefer not to.
The custom directive, however, is conditional on its output so I can't just cheat the output into the translate-values
I've tried doing something in the controller for the page like
$scope.value = vm.getValue();
var element = $compile('<span my-custom-directive="value"></span>')($scope);
return element[0].outerHTML;
But this unfortunately creates an infinite digest loop. I feel like this is the right "path", having some JS pre-compile the fragment I need to insert into the translation, but I'm stuck as to how to accomplish that!
How can I insert angular-compiled HTML with directives attached into a translated string?
I may have worded this title incorrectly but I am hoping to still get some help. I am trying to use an expression that I get from an ng-repeat to include an new page using ng-include but it is not rendering. I can write in the page I want, but I want to use the expression to include multiple pages dynamically
<div ng-app="" id="container" ng-controller="pagesController">
<span ng-repeat="x in pages">
{{x.Page | uppercase}}
<b ng-if="!$last" href="#"> - </b>
<div ng-include="'{{x.HTML}}'" name="{{x.Page}}"></div>
</span>
But if I manually enter the pages like so:
<div ng-include="'generic.htm'" name="generic"></div>
It works as expected.
I am getting used to Angular.js obviously and I am not sure if this is possible or if I can do what I want really. Any help would be appreciated.
ng-include is an angular directive, and assuming x.HTML is a string, omit the {{}} and the single quotes:
ng-include="x.HTML"
I'm trying to use AngularJS built-in directives to achieve some simple JS effect without writing actual js code. It actually works pretty well, except the initial flash.
I know to deal with text, people should use ng-bind instead of {{}}
But how do you deal with directives like ng-if?
Here is my code:
<li ng-if="!magazines.resolved"> <!-- add "&& isOwner" when done -->
<dl>
<dt ng-model="changeToActivation" ng-init="changeToActivation=false" ng-mouseover="changeToActivation=true" ng-mouseleave="changeToActivation=false"><img ng-if="!changeToActivation" ng-src="<?php echo base_url('public/images/system_icons/add_magazine.jpg');?>">
<img ng-click="addMagazine()" id="activated" ng-if="changeToActivation" ng-src="<?php echo base_url('public/images/system_icons/add_magazine_activated.jpg');?>"></dt>
<dd class="magazineName">Create <br> A new magazine</dd>
<dd class="publishDate">Now!</dd>
</dl>
</li>
I know it gets a bit hard to read, but it's very easy. There is a model defined on <dt></dt> tag. If mouse is over this tag, the model value becomes true; when leaves, it becomes false.
Based on this boolean model value, one or the other image will be shown.
It works like a charm, but I can see both images at the very beginning, flashing!
How to deal with something like this then?
ngCloak may help, but you should also use ng-src for the actual image source, this will prevent your site from loading the image before the model has received a value. Also when using ngCloak, you may need to load the AngularJS source at the top of your html file as it may try to load the image before it knows what to do with the ng-cloak directive.
Applying ngCloak to you dt should do the trick for you: http://docs.angularjs.org/api/ng.directive:ngCloak
Here's an example from the docs. Note that it's added in two places- the directive as well as a class. The class is only needed for IE7 support.
<div id="template2" ng-cloak class="ng-cloak">{{ 'hello IE7' }}</div>