i am using the follow code to include dynamic less stylesheet in my angularjs project.
<link ng-repeat="stylesheet in getStylesheets track by $index" rel="{{ stylesheet.type }}" type="text/css" ng-href="{{ stylesheet.href }}" >
The issue is that the less.js cannot compile it on the fly.
You could try to refresh this way:
localStorage.clear();
less.refresh();
From https://github.com/less/less.js/issues/346
Related
In my Hugo-based website, I often use <span> tags within my post titles. I am experiencing an issue where this HTML is always escaped in one particular context. As an example, take a post where the title given in the header of the Markdown file is as follows:
title: 'This is a title with Spanish: <span lang="es">Hola!</span>'
In the single.html partial of my Hugo theme, <h2 class="posttitle">{{ .Title | markdownify }}</h2> works correctly, it passes This is a title with Spanish: <span lang="es">Hola!</span> to the final HTML of the page.
However, in the header.html partial of my Hugo theme, <title>{{ .Title | markdownify }}</title> does not work. Instead, Hugo passes an escaped string to the final HTML of the page: <title>This is title with Spanish: <span lang="es">Hola!</span></title>
How can I achieve the same behavior in header.html as in single.html?
EDIT: My theme is exceedingly simple, the hugo-xmin theme with minimal changes. My theme’s header.html partial is as follows:
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ .Title | markdownify }} | {{ .Site.Title }}</title>
<link rel="stylesheet" media="screen" href="{{ "/css/style.css" | relURL }}" />
<link rel="stylesheet" media="screen" href="{{ "/css/screen.css" | relURL }}" />
{{ partial "head_custom.html" . }}
</head>
<body>
<h1 id="sitetitle">.Site.Title</h1>
<p id="sitedescription">{{ $.Site.Params.description }}</p>
<nav>
<ul class="menu">
{{ range .Site.Menus.main }}
<li>{{ .Name }}</li>
{{ end }}
</ul>
<hr/>
</nav>
and my theme’s single.html file is as follows:
{{ partial "header.html" . }}
<main>
<div class="article-meta">
<h2 class="posttitle">{{ .Title | markdownify }}</h2>
Published on <time>{{ .Date.Format "2006-01-02" }}</time>
</div>
{{ .Content }}
</main>
{{ partial "footer.html" . }}
If you want to avoid escaping, you should use the safeHTML function.
{{ .Title | safeHTML }}
This is not a working solution. Even with this function placed into the header.html partial, the HTML continues to be escaped.
This could be an issue with an older version of Hugo, I am on v0.74.3 and it seems to be working as intended. You might want to upgrade if you're not on the latest version or check on the discourse if you are unable to upgrade.
I downloaded your nonworking-blog minimal example and was able to fix your issue by doing two things:
Put the following at the bottom of the config.toml:
[outputFormats]
[outputFormats.html]
isPlainText = true
Comment out line 34 in layouts/_default/list.html so it now looks like this:
{{/*
{{ template "_internal/pagination.html" . }}
*/}}
I did #2 because it was producing an error that I don't have time to look into now, but the key to solving your issue is outputFormats, which are discussed at https://gohugo.io/templates/output-formats/, especially this:
isPlainText
use Go’s plain text templates parser for the templates. Default: false.
If anyone knows how to fix the line-34 problem, I'd love to understand that.
BTW, I've been using isPlainText = true for more than a year on my Infinite Ink site and so far have not had any problems (but I do not use any {{ template … }} calls).
I have HTML like this:
<div id="top"
ng-hide="app.stateService.displayModal">
<div>{{ app.userService.data.name }}</div>
</div>
// Body HTML here. No images are loaded. Just Divs
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script src="/Scripts/angular.js"></script>
Now the page briefly shows {{ app.userService.data.name }}.
If I want this to not show then do I have to have AngularJS in the head of my document? The reason I placed AngularJS at the end was because I wanted to have the page appear as quickly as possible.
Can someone advise me about this and also tell me how I can make the {{ xxx }} hidden when the page first loads up.
You could use ng-cloak to hide any elements until it get compiled.
<div id="top" ng-cloak
ng-hide="app.stateService.displayModal">
<div>{{ app.userService.data.name }}</div>
</div>
The CSS rules to hide the elements with ng-cloak will be added automatically by angular.js.
If that isn't fast enough you could add the css rules yourself at the head:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
Or using the angular-csp.css file.
Also see: ngCloak documentation
you can do it in two ways -
ng-bind
OR
ng-cloak
{{ app.userService.data.name }}
Either way, you {{}} won't show up. no need to put angular.js inside head.
This is the role of the ng-cloak directive used as a css class.
Check doc: https://docs.angularjs.org/api/ng/directive/ngCloak
You better use ng-bind
<span ng-bind="app.userService.data.name"></span>
instead of {{app.userService.data.name}}.
This will avoid that flickering.
Here is the text I am trying to clean up:
Infographic: What is BPA? Why does it get such a bad rap? Discover more about it in our
infographic - Why BPA will not kill you. (See a larger version here: <a
rel="nofollow">https://www.containerandpackaging.com/sam/blog/infographics/infographic_
WhyBPAWontKillYou.jpg</a> )<br/><br/><a rel="nofollow" target="_blank"
href="http://www.facebook.com/containerandpackaging/photos/a.268688407811.176198.266913
322811/10152627992307812/?type=1&relevant_count=1" id="" title="" style=""><img
class="img" src="http://sphotos-e.ak.fbcdn.net/hphotos-ak-xpa1/v/t1.0-
9/s130x130/10600407_10152627992307812_1312617274906388391_n.jpg?
oh=505a27309629d804d894521dc035bce2&oe=5459BBC9&__gda__=1413295158_68fb27fae5cc75b8264a
8f5912613fc5" alt=""/></a><br/>
Here is my original javascript code:
var content = item.description.replace(/]*>/g,"").replace(/\/g, "");
content = stripHtml(content);
The output looks something like this:
Infographic: What is BPA? Why does it get such a bad rap? Discover more about it in our infographic - Why BPA will not kill you. (See a larger version here: ht...
Is there a way to do this in angular?
Use Angular's $sanitize service
AngularJS uses JavaScript as a base, and it doesn't have anything special to strip HTML, so you should keep using your javascript.
Since Angular includes jQuery this is easy. Put the HTML in a container you can target like and use the jQuery method .text(). Here's the code:
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
$(document).ready(function() {
$("#new").val($("#original").text());
})
</head>
<body>
<div id="original">
Infographic: What is BPA? Why does it get such a bad rap? Discover more about it in our
infographic - Why BPA will not kill you. (See a larger version here: <a
rel="nofollow">https://www.containerandpackaging.com/sam/blog/infographics/infographic_
WhyBPAWontKillYou.jpg</a> )<br/><br/><a rel="nofollow" target="_blank"
href="http://www.facebook.com/containerandpackaging/photos/a.268688407811.176198.266913
322811/10152627992307812/?type=1&relevant_count=1" id="" title="" style=""><img
class="img" src="http://sphotos-e.ak.fbcdn.net/hphotos-ak-xpa1/v/t1.0-
9/s130x130/10600407_10152627992307812_1312617274906388391_n.jpg?
oh=505a27309629d804d894521dc035bce2&oe=5459BBC9&__gda__=1413295158_68fb27fae5cc75b8264a
8f5912613fc5" alt=""/></a><br/>
</div>
<textarea id="new" cols="40" rows="10">
</textarea>
</body>
</html>
Here's a working example: http://jsbin.com/xovijoko/1/edit?html,js,output
When i reload the page, it shows the text with {{ }} instead of processing and outputting.
How to avoid this and optimize the site to load smoothly?
use ngcloak
https://docs.angularjs.org/api/ng/directive/ngCloak
<div id="template1" ng-cloak>{{ 'hello' }}</div>
I'm trying to define a directive in Angular which takes a DOM like this:
<example-directive href="{{ foo }}"><img src="{{ bar }}"></example-directive>
... and transforms it to ...
<img src="BAR_VALUE">
... but only if the href is defined. If {{ foo }} is empty, it should transform to
<img src="BAR_VALUE">
It also needs to respond appropriately when the value of {{ foo }} and {{ bar }} changes. I can't figure out the documentation sufficiently to manage it. How do you do it?
Since the conditional show/hide doesn't work for you, what you need is variable templates within the same directive: https://coderwall.com/p/mgtrkg
This way you will have one directive and you will select between two templates depending on the existence or not of the href.
I dont see a need to use a directive here. Just use ngIf:
<a ng-if="foo != ''" href="{{foo}}"><img src="{{ bar }}"></a>
<img ng-if="foo == ''" src="{{ bar }}">
ngIf is a newer directive. Check for the supporting versions.
UPDATE: Ok I misunderstood the problem. See if i got it right:
I would have two css classes:
.vis { display: normal; }
.hid { display : none; }
Then your directive could have a html like this
<span ng-show="foo != ''"><img src="{{ bar }}" /></span>
<span ng-show="foo == ''"><img src="{{ bar }}" /></span>
It's a bit of a hacky workaround because of the nature of your html (deleting only a wrapping element makes it tricky), but it should work.