Ionic InAppBrowser - how to print a variable value in single quotes - angularjs

I am trying to print the value of merchant.merchant_url for my inAppBroswer call. I have looked at the recommended javascript to parse using the A tag at the blog by Nic. https://www.thepolyglotdeveloper.com/2014/12/open-dynamic-links-using-cordova-inappbrowser/
However, this impacts my other links on the app that I do not need to open in the InAppBrowser. Can someone please recomend how can I print this url value? I tried ng-href as well but then the opened site takes over the app and there is no way to exit.
I have also tried using ng-click as suggested here How do I open inAppBrowser using Angular JS?
But this doesn't help either. I know for a fact that merchant.merchant_url has value because i can print it outside my a href. However I having trouble getting it in single quotes for the execution. I have tested non-dynamic links and they work fine in the app. Stripped off < > for the so that the code is readable.
a class="item" href="#" onclick="window.open('{{merchant.merchant_url}}', '_blank', 'location=yes'); return false;"
View
/a

Past this code your controller:
$scope.urlOpen = function(url) {
console.log(url);
window.open(url, '_blank', 'location=yes');
};
and change in your view:
<a class="item" href="#" ng-click="urlOpen({{merchant.merchant_url}})">View </a>

Most of the code posted by xuser is ok. Except that merchant.merchant_url has to be in single quotes.
urlOpen('{{merchant.merchant_url}}')

Related

Unable to click button using ng-click for AngularJS application

I am automating AngularJS application and need help for ng-click.
Here is the HTML code:
<a ng-click="openProjectModal($event)">Create Project</a>
I tried the code below:
.//a[ng-click='openProjectModal($event)']
Using xpath is working, but i don't want to use xpath.
since it is a link 1st think is you have to javascriptvoid(); to stop it redirection.
and in your controller you should have to write openProjectModal function
i.e
<a ng-click="javascriptvoid();openProjectModal($event)">Create Project</a>
$scope.openProjectModal = function(event){
.............
.............
}
it will might help you

Making behavior of hyperlinks conditional in AngularJS

In an Angular app, I have a list of hyperlinks that need to have the following behavior:
if a certain condition is present (e.g. if a certain cookie has value x), a click on the hyperlink should open a modal window;
if this condition is not met (e.g. if the cookie has value y), the hyperlink should act in its usual manner and open the link in a new tab.
The hyperlinks are formatted as follows:
<a ng-href="{{article.url}}" target="_blank" ng-click="myFunction()">
{{article.title}}
</a>
I am puzzled by how to implement such a behavior. If I leave both ng-href and ngclick directives, then ng-href will insert the url and every click will open a page in a new tab. If I remove the ng-href directive, then the only way to open a link in another tab will be through javascript, but this is prevented by most browsers. I couldn't think of a way to make ng-href conditional (for example, writing <a ng-href="myCondition === true ? {{article.url}} : '#'"> doesn't work).
Could you please suggest a way of how to implement such a functionality in Angular?
This worked for me
<a ng-href='{{(element.url.indexOf("#")>-1) ? element.url : element.url + "client_id="}}{{credible.current_client_info.client_id}}'>{{element.title}}</a>
Here is a bit different approach that worked for me, didn't use ng-href at all:
HTML:
<a ng-click="myFunc()">{{article.title}}</a>
Controller:
$scope.myFunc = function() {
if (myCondition){
window.open($scope.article.url,'_self',false);
}
window.open("/#/",'_self',false);
};
Here is what I came up with. It looks kind of ugly, so if you have better suggestions, they are very welcome:
I wrote two separate anchor tags with different behaviors and made Angular choose between them depending on whether or not the necessary condition is met:
<a href="#" ng-if="checkCookies() === 'show popup'" ng-click="openArticle(article)">
{{$parent.article.title}}
</a>
<a ng-href="{{$parent.article.url}}" target="_blank" ng-if="checkCookies() === 'no popup'">
{{$parent.article.title}}
</a>
And in the javascript file, I wrote the checkCookies() function that looks up the value of the particular cookie.

Set ng-href to current page

Is it possible to set ng-href to go to the current page?
eg:
<a ng-href="https://www.facebook.com/sharer/sharer.php?u={{ window.location.href }}">facebook</a>
When the above runs, I keep getting:
<a ng-href="https://www.facebook.com/sharer/sharer.php?u=" href="https://www.facebook.com/sharer/sharer.php?u=">facebook</a>
How are you setting value to window.location.href ? This sure doesn't look like native JS.
Here's a fiddle to help you out.
ng-href is part of AngularJS and there are a few ways to point to the same page. The method I use do not include the domain so the Angular Router will direct it as needed, like the following.
ng-href="/mySubDomain"
The Docs go into detail about this and give a nice code sample that shows you what you should expect from the route change.
https://docs.angularjs.org/api/ng/directive/ngHref

AngularJS ng-href does not go to link

I've checked the docs and the ng-href not working thread on here already but I'm stumped.
Does ng-href require a full path? Mine currently looks like <a ng-title="{{title.text}}" ng-id="{{id.num}}" ng-href="/page.php#param:{{id.num}}"><span>go here</span></a>, but when I click on it, while it changes the URL in the address bar of the browser correctly (and it's a legitimate URL; I can hit "enter" in the address bar and it will "go there"), it does not actually GO TO that page.
What's going wrong? Do I need to combine this with an ng-click of some sort? And if so, why?
UPDATE: The link is going to the same page from which it is being called, but with a different parameter for a different data record display. I think that may have something to do with it ...
The simplest way to do this is adding target="_self", in your case this is the solution:
<a ng-title="{{title.text}}" ng-id="{{id.num}}"
ng-href="/page.php#param:{{id.num}}" target="_self">
<span>go here</span>
</a>
No ng-click and no AngularJS function are required.
Here is how I ended up solving this one:
Template:
<a ng-title="{{title.text}}" ng-id="{{id.num}}" ng-click="go_to_item(id.num)">
<span>{{title.text}}</span>
</a>
Javascript:
$scope.go_to_item = function(display) {
window.location = '/page.php#id:' + display;
location.reload();
};
This is working as it should in our app. Why the Angular-specific $location and $window don't work there is a mystery to me, though. I tried those first and they didn't do it, so if anyone can explain why, I'll give you "accept answer" for this question! ;-)
I tried your code and it worked for me:
<script>
$scope.title = {text: "test"};
$scope.id = {num: 123};
</script>
<a ng-title="{{title.text}}" ng-id="{{id.num}}" ng-href="/page.php#param:{{id.num}}"><span>go here</span></a>
becomes like this:
<a ng-title="test" ng-id="123" ng-href="/page.php#param:123" href="/page.php#param:123"><span>go here</span></a>
I had this problem earlier. I was not allowed to have ng-href inside of a ng-controller for some reason.

ng-click not setting $location.path() when path is dynamic

I'm trying to use a tag like this:
<a ng-click="$location.path('/restaurant/{{restaurant._id}}')">{{restaurant.name}}</a>
However, nothing happens when I click the tag.
Oddly, if I hard-code the value there, like this:
<a ng-click="$location.path('/restaurant/512ad624b67fe1f446709331')">{{restaurant.name}}</a>
it works as expected.
Screenshot of the DOM:
Why would this be? How could I work around this?
From AngularJS ng-click not invoked with {{$index}} used, you are able to use the variable directly, without braces.
I.e.
<a ng-click="$location.path('/restaurant/' + restaurant._id)">{{restaurant.name}}</a>
Hope this helps!
$scope.doTheNeedful = function(country){
var newPath = "home/";
newPath += country;
$location.path(newPath);
}

Resources