I'm trying to make my first AngularJS project and I stumbled upon a little issue...
I tried to create a custom directive (see apps.js extract) and copied some code into a separate html (see wishlist.html).
The custom directive works: the template file is included. BUT special characters like ë or € aren't shown via the custom directive and they are shown if I use the same code in the index.html.
Can somebody explain me why I get this behaviour and how to avoid it?
Thanks!
S.
index.html:
...
<body class="container" ng-app="gimmiApp">
<!-- Test with custom directive -->
<div ng-controller="WishlistController as wishlist">
<wishlist></wishlist>
</div>
<!-- Test without custom directive -->
<div ng-controller="WishlistController as wishlist">
<h1>Ideeën</h1>
<div class="row" ng-repeat="wish in wishlist.wishes">
<h3>{{wish.title}}
<em>{{wish.price | currency : "€" : 2 }}</em>
</h3>
</div>
</div>
</body>
...
wishlist.html
<h1>Ideeën</h1>
<div class="row" ng-repeat="wish in wishlist.wishes">
<h3>{{wish.title}}
<em>{{wish.price | currency : "€" : 2 }}</em>
</h3>
</div>
app.js:
...
app.directive('wishlist', function(){
return {
restrict: 'E',
templateUrl: 'views/wishlist.html'
};
});
...
This is what I get...
I found the problem!
My file wasn't encoded in UTF-8. Change my file's character set to UTF-8 solved my problem.
Related
I'm trying to find out a way to modify the HTML code to replace every Bootstrap col class name (col, col-xs-x, col-x etc.) by col-12 after the page is loaded.
I could do that with .removeClass('name') and then .addClass('name') but I need to use some RegEx because I want to modify Bootstrap col class names.
From something like this :
<body>
<div class="col-xs-6 col-sm-4 col-2"> Content 1 </div>
<div class="col"> Content 2 </div>
</body>
I want to modify to something like this :
<body>
<div class="col-12"> Content 1 </div> <!--can even be class="col-12 col-12 col-12"-->
<div class="col-12"> Content 2 </div>
</body>
I found here someone who did that with html().replace in jQuery so I tried to do the same but it doesn't work.
Way like this:
$(document).ready(function () { // my RegEx works well, verified it on regex101
let col_let_num = $('body').html().replace(/\bcol\b(\-[a-z]{0,2})?(\-)?([0-9]{0,2})?/i, 'col-12')
$('body').html(col_let_num)
})
So my question is, do you have any solution to change HTML content after the page is loaded ?
You forgot to add ')' to your Javascript.
but i really cant realize what you are trying to do here.
any way
$(document).ready(function () { // my RegEx works well, verified it on regex101
let col_let_num = $('body').html().replace(/\bcol\b(\-[a-z]{0,2})?(\-)?([0-9]{0,2})?/i, 'col-12')
$('body').html(col_let_num)
})
Edited
here you go
$('[class*="col"]').each((i, e) => {
let classes = $(e).attr('class').split(/\s+/);
classes.forEach(v => {
let col_let_num = v.replace(/\bcol\b(\-[a-z]{0,2})?(\-)?([0-9]{0,2})?/i, 'col-12')
$(e).attr('class', col_let_num)
})
})
this should work.
I get string data from my database to my variable, I want to display them as HTML tags by [innerHTML], but it doesn't work.
The variable is displayed on string instead HTML Tags.
I tried to use with DomSanitizer but it don't work:
article:Article[];
(article.articlesTitleHtml:SafeHtml;)
in the function:
this.article.forEach(elementArticle => {
elementArticle.articlesTitleHtml = this.sanitizer.bypassSecurityTrustHtml(elementArticle.articleTitle)
});
in HTML page:
<div *ngFor="let item of articles">
<div id="{{item.articleId}}">
<h2 class="chart" [innerHTML]="item.articlesTitleHtml"></h2>
</div>
my code:
in Type Script:
articles:Article[];
ngOnInit() {
this.apiArticle.getArticleList().subscribe(data=>{
this.articles=data
})
in HTML page:
<div *ngFor="let item of articles">
<div id="{{item.articleId}}">
<h2 class="chart" [innerHTML]="item.articleTitle"></h2>
</div>
</div>
It should work, you can check here...
if you can share the type of data that you're dealing with, it will give more insight into the appropriate DomSanitizer method which should be called
in my example above, i used both bypassSecurityTrustHtml & bypassSecurityTrustUrl for the 2 different types of strings which needed sanitization
I have a mongo database with a document that contains some html in it, and when I try to take it and put it on a webpage, it just displays as the actual text and not the html. Here is the json with the html:
db.games.insert({
title: "Minecraft",
background: "/images/minecraft.jpg",
code: "<div id=\"gameBackround\" class=\"col-lg-2 popular-games view view-first\" style=\"background-image:url( /images/gameArt/minecraft.jpg )\"> <div class=\"mask\"> <h2>Minecraft</h2> <p>Amount of groups playing this title now: 11,075</p> Join Lobby </div> </div> <style> </style>"
})
and here is how I display it on the page:
<template name="example">
{{code}}
</template>
Use should use triple curly braces to escape html code returned from a helper.
<template name="example">
{{{code}}}
</template>
Here is an example.
I'm building go web application. I found some anomaly on the rendered html page. All of my html comments <!-- --> are suddenly not being rendered. My guess it's because the go version I used (just updated to higher version), because it was fine before I updated it.
This is my code:
<!-- prepare the breadcrumbs -->
<ul class="breadcrumb" data-bind="foreach: viewModel.breadcrumbs">
<!-- ko if: ($index() + 1) < len(viewModel.breadcrumbs()) -->
<li>
<a data-bind="attr: { href: href }">
<i class="fa fa-home"></i>
<span data-bind="text: title"></span>
</a>
</li>
<!-- /ko -->
<!-- ko if: ($index() + 1) == len(viewModel.breadcrumbs()) -->
<li class="active" data-bind="text: title"></li>
<!-- /ko -->
</ul>
And this is the rendered page source:
Because of this issue, many of my KnockoutJS codes which are written using containerless control flow syntax goes crazy, it doesn't work at all.
What should I do to solve this? Thanks in advance
There is a special type in the html/template package: template.HTML. Values of this type in the template are not escaped when the template is rendered.
So you may "mark" your HTML comments as template.HTML and so they will not be escaped or omitted during executing your template.
One way to do this is to register a custom function for your template, a function which can be called from your template which takes a string argument and returns it as template.HTML. You can "pass" all the HTML comments to this function, and as a result, your HTML comments will be retained in the output.
See this example:
func main() {
t := template.Must(template.New("").Funcs(template.FuncMap{
"safe": func(s string) template.HTML { return template.HTML(s) },
}).Parse(src))
t.Execute(os.Stdout, nil)
}
const src = `<html><body>
{{safe "<!-- This is a comment -->"}}
<div>Some <b>HTML</b> content</div>
</body></html>`
Output (try it on the Go Playground):
<html><body>
<!-- This is a comment -->
<div>Some <b>HTML</b> content</div>
</body></html>
So basically after registering our safe() function, transform all your HTML comments to a template action calling this safe() function and passing your original HTML comment.
Convert this:
<!-- Some HTML comment -->
To this:
{{safe "<!-- Some HTML comment -->"}}
Or alternatively (whichever you like):
{{"<!-- Some HTML comment -->" | safe}}
And you're good to go.
Note: If your HTML comment contains quotation marks ('"'), you can / have to escape it like this:
{{safe "<!-- Some \"HTML\" comment -->"}}
Note #2: Be aware that you shouldn't use conditional HTML comments as that may break the context sensitive escaping of html/template package. For details read this.
You can use text/template instead of html/template and do all escaping manually using built-in functions such as html and js (https://golang.org/pkg/text/template/#hdr-Functions). Be aware that this is very error prone though.
The html code goes something like this:
<div ng-if="name=='John'">
<div class="item item-avatar"> <img ng-src="john.jpg"></div>
</div>
<div ng-if="name=='Margaret'"
<div class="item item-avatar"> <img ng-src="margaret.jpg"></div>
</div>
Instead of ng-if, I've tried using ng-show as well. Neither worked. Both John as well as Margaret showed on the page no matter which I used. I tried with ng-switch also.
The variable 'name' I initialized earlier on the same HTML file as:
<a class="item item-avatar item-icon-right" ng-init="name = 'John'" href = "#/Page3"></a>
Clicking on the above line leads to Page3 where I need to display either John or Margaret depending on the value of 'name'.
Is the syntax wrong or something, because that could be very well possible. I'm new to Ionic and AngularJS.
Try this:
<div ng-show="name=='John'" ng-init="name = 'John'">
<div class="item item-avatar"> John</div>
</div>
<div ng-show="name=='Margaret'"
<div class="item item-avatar"> Margaret</div>
</div>
Works for me. I just change ng-if to ng-show - which will shows div content when true and hide it otherwise. I also use ng-init inside a div.
Are you sure you started Angular? Did you set the ng-app directive?
It would help if you could provide a working example if you have other problems.
angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-init="name = 'John'">
<button type="button" ng-click="name='John'">John</button>
<button type="button" ng-click="name='Margaret'">Margaret</button>
<div ng-if="name=='John'">
This is John
</div>
<div ng-if="name=='Margaret'">
This is Margaret
</div>
</div>
I fixed you plunker - now it should be working.
Bug #1: ng-init is for initialization not to set values at runtime -> use ng-click instead
Bug #2: You use the same controller for all pages but for each page a new controller will be initialized, which resets the 'name' property
I implemented a setName function to set the name in the rootscope and to go to page3. In a correct implementation you should pass the name as a $stateparam to the new state/page. But for that please have a look at the ui-router documentation.
$scope.setName = function(name) {
console.log(name);
$rootScope.name = name;
$state.go('Page3');
};