I've a link like this:
<a ui-sref="someState(Param:'مثال')"> A localized param </a>
when compiling the Angular-ui-router, generates a href like this :
A localized param
how can I avoid this?
what i have tried:
creating a new type using $urlMatcherFactoryProvider
$urlMatcherFactoryProvider.type('decoded', {
encode: function (item) {
return decodeURIComponent(item) // i put this to decode personally
},
decode: function (item) {
return decodeURIComponent(item);
},
is: function (item) {
return true;
}
});
this actually happens inside 'angular' not 'ngRoute' , angular forces encoding all urls using encodeURICompenent,
so you need to change encodeUriQuery inside angular.js so it would pass arabic characters without encoding
function encodeUriQuery(val, pctEncodeSpaces) {
var r = /[\u0600-\u06ff]|[\u0750-\u077f]|[\ufb50-\ufc3f]|[\ufe70-\ufefc]/;
if(r.test(val)){
return val.replace(/\s/g,'-');
}else{
return encodeURIComponent(val).
replace(/%40/gi, '#').
replace(/%3A/gi, ':').
replace(/%24/g, '$').
replace(/%2C/gi, ',').
replace(/%3B/gi, ';').
replace(/%20/g, (pctEncodeSpaces ? '%20' : '+'));
}
}
if you're using minified version or don't want to bother looking into code here is a monkey patch you can copy and paste this anywhere in your code
window.encode = window.encodeURIComponent;
window.encodeURIComponent = function(val){return /[\u0600-\u06ff]|[\u0750-\u077f]|[\ufb50-\ufc3f]|[\ufe70-\ufefc]/.test(val) ? val.replace(/\s/g,'-') : window.encode(val)};
notice that part replace(/\s/g,'-') it replaces whitespaces with a dash because in angular it causes some issue to have whitespace in the url
the solution it's very simple actually
you can use javaScript decodeURIComponent() function on $scope.item.title for me it's worked like charm .
in controller use it like
$state.go("single-page", { contentType: "portfolio", date: "139411", title: decodeURIComponent("اولین-نمونه-کار-تست") });
in inspect you see something like :
its better for google seo ، google understood farsi better that way
but when you click on the link in url place you see this
Related
In angular I want to dynamically create a map based on the address entered. I have successfully done this in VueJS. But in angular this triggers security warnings.
HTML:
<iframe
ng-src="https://maps.google.com/maps?&q={{encodeURIComponent(item.address)}}&output=embed"
allowfullscreen>
</iframe>
I have tried creating the following:
app.filter('trustAsResourceUrl', ['$sce', function ($sce) {
return function (val) {
return $sce.trustAsResourceUrl(val);
};
then piping it as so:
| trustAsResourceUrl}}
Which works if using an already established URL but not since I'm trying to form URL from address. I get the following:
Error: [$interpolate:noconcat] Error while interpolating: Strict
Contextual Escaping disallows interpolations that concatenate multiple
expressions when a trusted value is required. See
http://docs.angularjs.org/api/ng.$sce
VueJS was so simple but I can't use it in this project. I'll include it in case it gives any ideas:
methods: {
getmap: function(){
setTimeout(function () {
const searchInput = document.getElementById('searchTextField');
let addr = searchInput.value;
let embed = "<div class='form-group'><label for='exampleInputPassword1'>Map Preview</label><iframe frameborder = '0' scrolling= 'no' marginheight= '0' marginwidth= '0' src= 'https://maps.google.com/maps?&q=" + encodeURIComponent(addr) + "&output=embed' > </iframe></div>";
$('.place').html(embed); }, 200)
},
Essentially you can't use this filter. You have to create the string you want to use directly on the scope:
this.src = $sce.trustAsResourceUrl("https://maps.google.com/maps?q="
+ encodeURIComponent(item.address) + "&output=embed");
Then <iframe ng-src="{{$ctrl.src}}">
You will have to update the entire src rather than just item.address.
I'm having problems with encoding and decode the text in the tinyMCE directive. I've created an own directive using the tinyMCE. I have an onRender function and onModelChange function.
This is the code of my onRender function:
onRender(): void {
this.model = this.ngModel.$viewValue;
this.ngModel.$formatters.push(function (value) {
return $('<div/>').html(value).text();
});
this.ngModel.$parsers.push(function (value) {
return $('<div/>').text(value).html();
});
And this the code for the watch:
onModelChanged(newValue: any, oldValue: any): void {
if (newValue == oldValue)
return;
this.ngModel.$setViewValue(newValue);
}
When my editor is empty and I type some value in it, it gives me back this format: "<p>test</p>", I removed the ; otherwise stackoverflow formatted the string.
This encoded text is what I need because I want to save the data as encoded HTML. When I save my page and reloads it, this will show in my text-editor: <'p'>test<'/p'>(again using '' to escape the tags) and it should show me the formatted HTML without the tags.
Could someone tell me what I'm doing wrong or what I'm missing?
Thank you,
Brent
Fixed this by using this code in the onRender()
this.model = return $('<div/>').html(this.ngModel.$viewValue).text();
I don't know why on my example when I introduce some a string with html code. it doesn't appear on HTML format.
An example of my job is here:
vm_main.test = "Documents" +
"internet site <b><a href='http://www.google.com'>www.google.com</a></b>.";
vm_main.showModal = {
mostrarErrores : false,
showModal : function(jsonError) {
var options={
tituloModal: jsonError.titleModal,
textoPrincipal: jsonError.mainMessage,
textoBtnAceptar: "Aceptar",
accionBtnAceptar: "vm_popup.cerrarPopup()",
};
commonPopUpService.getDisclaimerGeneric($scope, 'commonPopUpController', options);
}
};
function OnOptionClick() {
//alert('mostrar popups');
var jsonError = {
titleModal : "Privacy Modal",
mainMessage : "{{vm_main.test}}"
};
vm_main.showModal.showModal(jsonError);
}
error image:
DEMO
You need to use ngBindHTML :
https://docs.angularjs.org/api/ng/directive/ngBindHtml
Here is the solution for your issue :
How to modify innerHTML by evaluating an angular expression
SOLVED !!!!
The solution is get the angular-sanitize.js library, inject into our module and after that use it as follow:
<div ng-bind-html="modalObj.textoPrincipal"></div>
here you can see it working: DEMO
in my view I've got a scope object which contains the params of my query.
What is the easiest way to generate a href attribute using it in a link in my view?
$scope.search_params // => { q: "test", order: "asc", filter: "price" }
// in my view I want to generate a link like this.
...
thanks.
You could use the ng-href directive :
<a ng-href="/search?q={{ search_params.q }}&order={{ search_params.order }}&filter={{ search_params.filter }}">...</a>
If you want to customise your URL (when for example parameters are missing), you should create a custom function in your controller and refer it in the view.
Something like this :
$scope.myHref = function () {
var res = '?';
if (search_param.q) {
res = res + 'q=' + search_param.q;
}
...
}
<a ng-href="/search{{ myHref() }}">...</a>
I think that the first solution is much cleaner, and you should check the given URL after to check if it's null.
More info from the docs.
I'm trying to pass a directory location and the file path as part of the hashmaps in backbone routes. This is the url with hashmaps:
localhost/index.html#directory-http://localhost/foobar-html/foo.html
and this is what my route that maps the above url:
routes: {
'directory-*directoryPath-*filePath': 'render'
},
render: function (directoryPath, filePath) {
// I get the entire url in directoryPath variable
// http://localhost/foobar-html/foo.html
// and filePath is empty.
}
What would be the right way to map such type of hash URL? Thanks!
From the fine manual:
Routes can contain parameter parts, :param, which match a single URL component between slashes; and splat parts *splat, which can match any number of URL components.
Your problem is that a splat eats up everything so having two splats in one route is pointless; you can't use a parameter part, :x, because that stops at a slash.
There are a few things you can do.
You could URI encode the slashes in link and use parameter parts. The URL would look like this:
#directory-http:%2f%2flocalhost%2ffoobar-html%2ffoo.html
and the router would be like this:
routes: {
'directory-:directoryPath-:filePath': 'render'
},
render: function(d, f) {
d = decodeURIComponent(d);
f = decodeURIComponent(f);
//...
}
Demo: http://jsfiddle.net/ambiguous/xBnaN/
You could add your route as a regex using route, that would give you more freedom in how you construct the pattern. For example, a fragment like this:
#directory-http://localhost/foobar-html/foo.html
could be handled with a router like this:
initialize: function() {
this.route(/directory-(.*?)-(.*)/, 'render');
},
render: function(d, f) {
//...
}
Demo: http://jsfiddle.net/ambiguous/r8MBb/
The second option will run into problems with you inevitably get a - inside your directoryPath or filePath; you could URI encode embedded -s to get them through the first option though.