how can I print special characters using angularjs´s interpolate function (portuguease accents)?
{{product.name}} --> Não é um bom exemplo
Currently I´d get --> Não é um bom exemplo
EDIT:
tried to create a simple plunkr but it just worked. Now I wonder if this has anything to do with a JSP.
The code is pretty simple, just a ng-controller basically
Thanks
After some research I found it:
adding charset="utf-8" on each script import with special characters did the trick:
<script src="<c:url value="/resources/scripts/client.js" />" charset="utf-8"></script>
Related
I try to use "ngroute" to load html templates.
Everything works fine, but when I try to show words in Hebrew in the "ng-view", I get only question marks instead of the Hebrew chars (???????????).
in the <head> tag I added <meta charset="utf-8">
and if the Hebrew is static in the page it works fine.
but when I use "ngroute" to load it it doesn't.
<head>
<!-- start: Meta -->
<meta charset="utf-8">
<title></title>
<!-- end: Meta -->
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/controllers.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- end: CSS --></head>
Any idea? Is there anything I should add to the html view page?
I added the <meta meta charset=utf-8> tag to the all the templates html and not just to the <head> and it fixed the problem.
I've solved by resaving the html template file with utf-8 encoding. In Visual Studio, Save As > Save with Encoding... button.
I ran into this issue as well for Danish characters and symbols.
I was missing the charset = utf-8 in /.editorconfig under the angular project!
So it defaulted to Windows-1251.
This worked for all new files and when resaving old ones with wrong encoding.
on my html header i have this two lines:
<html>
<head>
<!--bootstrap-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--angular-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
but if i have this two lines at the same time, bootstrap doesn't work. If i comment the line of the angularjs and leave the line for bootstrap alone, bootstrap will process correctly and format the elements on the page.
i have already tried change the order on headers and add diferent links to download the files, but nothing have worked.
Anyone knows a solution for both to work at the same time?
Thanks
You get the followed error in your console:
Uncaught Error: Bootstrap's JavaScript requires jQuery
So just do it as follow, and you get no errors:
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--bootstrap-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--angular-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
This must work :)
My problem is that I want to format numbers based on my language. For example, showing 123456.12345 in en-US as 123,456.12 or in fa-IR as ۱۲۳٬۴۵۶٫۱۲.
The best solution I can imagine is writing an angular filter but I think it is very slow because I need to show too many numbers in the view.
My question: Is there any better way to handle this problem or I have to use angular filters?
Solution 1 with filters:
You can include the relative locale script in index.html as stated here:
<html ng-app>
<head>
….
<script src="angular.js"></script>
<script src="i18n/angular-locale_de-de.js"></script>
….
</head>
</html>
Then using the built-in filter number you can format them easily
Solution 2 with toLocaleString:
If you don't want to use filter, you have to convert the numbers "manually" using toLocaleString for each number you have:
$scope.myNumber = 9999.99;
$scope.myNumber.toLocaleString('de-DE');
This is a JSFidlle showing you how a number is formatted for de-DE locale instead the en-US one used by default
Do we have anything equivalent to javascript alert() in soy file to display variable values?
I tried using javascript also in soy like below but didnt help (extendedFieldView is a List):
<#assign extendedField = extendedFieldView.ExtendedField>
<script type="text/javascript">
alert("${extendedField}")
</script>
Thanks!
I am facing below exception in IE-8 when I am loading the angular related page. It works fine in other browsers. Any specific reason?
SCRIPT5022: Argument 'module' is not a function, got undefined
angular.js, line 975 character 5
I had this same issue (when on IE < 9) and it took me forever to track it down...
angular.module('app', ['app.directives', 'app.filters', 'app.services', ]);
Note the trailing comma after 'app.services'.
I get errors like that when I try to inline end the script tag causing IE to not load all my scripts. Check if you have end tags for all your script includes.
To illustrate:
<script src="js/services.js"></script>
<script src="js/controllers.js"/> <!-- THIS IS A PROBLEM FOR IE -->
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="js/myApp.js"></script>
On IE9 this will result in:
SCRIPT5022: No module: myApp.filters
angular.min.js, line 17 character 195
Not entirely the same, but I can't test it on IE8. On Chrome however, this works perfectly. The weird thing about this, is actually the thing it can't seem to find, is in the script following the one with the inline ending. I can't really explain that.
Now, when I close the script tag like this:
<script src="js/services.js"></script>
<script src="js/controllers.js"></script> <!-- THIS WORKS -->
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="js/myApp.js"></script>
It works like a charm.
To sum it up, AngularJS tries to find your module called 'module', but is not able to find it. Probably due to a script that is not loaded. Try to find a script tag which closes inline, and end it as descibed above.
Hope that helps.
Another thing that might cause this is using keywords for object properties. I had three modules with the error above:
statistic.import = !statistic.import;
default: $scope.newGrid.default
$scope.data = JSON.stringify({export: exportParams})
The offending properties being import, default and export.
I don't know if you're still walking around same problem, but i've found up a possible cause:
when you declare any angular module you must inject dependences some like this:
angular.module('MyStore', ['ng','ngRoute']);
if you need invoke that module from another place to perform any action you probably mismatch if you attempt to inject dependences again... then you must call it by its name like this:
angular.module('myStore')
otherwise you will exploit your brain looking for the solution.
I hope it helps!