I have been working on an app that uses JSON data from a server. In this JSON data there is an object that is made up of HTML, which often has an URL in it. And I also have an object that is 'just' an URL which I load into a button which should open the URL when clicked. The problem is, however, that when I click the URL's in the Ionic View app the URL's will open inside the app itself. But when I click the URL's in the standalone build on Android both these URL's don't work. What I try to accomplish is that both these URL's open in the system browser when clicked. But I can't seem to find out why this doesn't work
I do have the Cordova script in my index.html, and I also have the InAppBrowser plugin installed from Cordova.
This is the button:
<a class="button button-full button-assertive" ng-model="button" ng-click="openUrl({{vacature.url}})"> Sollicitatielink </a>
This is the function in my controllers.js:
$scope.openUrl = function(url) {
window.open(url, '_system', 'location=yes');
};
This is the HTML in the JSON data:
via our website.
I was wondering if you guys could help me with why this doesn't work. Could it be that I did not implement the plugin correctly, and if so, how could I do this properly?
Thanks in advance!
this is how I implemented the plug-in and works for me:
<button class="button button-block button-stable" ng-click="openInBrowser('https://www.google.com')">
GOOGLE
</button>
then in the JS
myApp.controller('NameCtrl', ['$scope', '$ionicPlatform', '$cordovaInAppBrowser', function($scope, $ionicPlatform, $cordovaInAppBrowser){
$scope.openInBrowser = function(extUrl){
$ionicPlatform.ready(function() {
var options = {
location: 'yes',
clearcache: 'yes',
toolbar: 'yes'
};
$cordovaInAppBrowser.open(extUrl, '_system', options)
.then(function(event) {
// success
})
.catch(function(event) {
// error
});
}); // $ionicPlatform.ready
};//--------------------------------------
}]);
I figured out why my URL's were not opening when clicking the button. This is the code I now use for it to work properly.
This is the button:
<button class="button button-full button-assertive" ng-click="openUrl('{{vacature.url}}')"> Sollicitatielink </button>
This is the function:
$scope.openUrl = function(extUrl) {
window.open(extUrl, '_system');
};
Edit
The URL's in the JSON HTML data are now working because of this code:
via our website.
Is now changed to this:
via our website.
And now all the hrefs in the Ionic app work!
Related
I'm working on a website built using Laravel and AngularJS.
I want a certain link to open in a popup window.
The javascript code is
function popitup(url) {
newwindow=window.open(url,'test','height=400,width=550');
if (window.focus) {newwindow.focus()}
return false;
}
and the link is
<a ui-sref="test({id:test.id})" class="btn btn-primary fright" onclick="return popitup(this.href)" oncontextmenu="return false;">Resume</a>
when I click on the button the popup works fine but the link also opens up in the tab where I clicked it, but I don't want it to.
Is there a way to do it?
I would guess ui-sref will also bind a click-event and that event will trigger before yours.
You could skip the ui-sref and put the url in a data-attribute or inside the onclick-attribute. You could get the url using $state.href() instead. Then the problem may disappear.
Edit
You could bind it to a scope function and skip onclick all toghether. Something like this:
In the Controller (Also make sure you include $state in the controller first):
$scope.popitup = function(stateName, options) {
var url = $state.href(stateName, options);
newwindow=window.open(url,'test','height=400,width=550');
if (window.focus) {newwindow.focus()}
}
And in the HTML you invke the popuitup function with the state name and its parameters:
<a ng-click="popitup('test', {id:test.id})"
class="btn btn-primary fright" oncontextmenu="return false;">Resume</a>
Also see documentation for state.href.
<!DOCTYPE html>
<html>
<body>
Popup-window
</body>
</html>
try this code for popup window and change google.com to you site
I using Opencart Version 1.5.1.
Example my website url : www.website.com
and i set redirect link in controller :
$this->data['google'] = "https://accounts.google.com";
// this is url for login account google,so i can't change the htaccess
Then i call it in View :
<div class="omb_login">
<div class="omb_socialButtons">
//another button
<button class="btngoogle">
<i class="fa fa-google" data-size="icon"></i>
Google
// it's like <a href="https://accounts.google.com" ......
</button>
</div>
</div>
It's work on Chrome // link = https://accounts.google.com
but not work for Mozilla Firefox // nothing happen when i click.
I tried fix using function on click.
$(function() {
$('.btngoogle').on('click', function () {
var temp = ($(".google").attr("href"));
$(location).attr('href',temp);
});
});
when i click www.website.com/https://accounts.google.com.
Any one know how to fix (how make mozilla work for a href?) or (the redirect url ?) ?
I'm writing a static resume page using AngularJS. I want the user to click on my CV, a PDF, and be able to view it in the browser. My code works in Firefox, but when I test it in Chrome, I just get a black screen. It appears to be opening, but doesn't display the file.
The path to the PDF is specified in my controller and I've written a directive to display the link in my HTML.
Controller:
app.controller('webCV', function($scope) {
$scope.links = [{
text: 'Github',
link: 'https://github.com/a-person'
},
{
text: 'Resume',
link: '../CV.pdf'
},
{
text: 'Contact',
link: 'mailto:a.person#gmail.com'
}]
})
Directive HTML:
<div ng-repeat="x in info">
{{ x.text }}
</div>
What's a reliable cross-browser way of opening a PDF file as an <a href> link?
I assume this can be done without extra libraries and plugins like PDF.js so I'd rather not use them.
I've been stuck on this for ages so thanks in advance.
I have a tab bar system in my Ionic app. However I wanted to have some views that weren't apart of the tab bar and were just a sepertate page to be opened by a button.. For some reason whenever the page isn't a tab it will not open the view. I can see the URL change but it will not change to that view unless the view is also a tab as well. Hopefully that makes sense. I initially was trying to switch pages using Href, but then decided to try ng-click when href wasn't working.. here is my code below..
Where I have the state defined:
.state('tab.friendsadd', {
url: "/friendsadd",
templateUrl: "templates/friends-add.html"
})
Here is the button I had that would call the function:
<button class="button button-clear button-assertive" ng- click="changeview()">New Group</button>
and then here is my changeview() function, which I know is called correctly because the statement is printed:
$scope.changeview = function() {
console.log("hey why isnt this working");
$state.go("tab.friendsadd"); //change state
}
Not sure if this could be the issue but here is my template for the new view that I am trying to open as well:
<script id="templates/friends-add.html" type="text/ng-template">
<ion-view view-title="Sign-In">
<ion-content>
<p> Header </p>
<p> Tom brady </p>
</ion-content>
</ion-view>
</script>
Thanks for any help. I hope this is an easy fix...
try
.state('friendsadd', {
url: "/friendsadd",
templateUrl: "templates/friends-add.html"
})
and this in the html
<button class="button button-clear button-assertive" href="#/friendsadd" ui-sref="friendsadd">New Group</button>
and if your template is an actual file, then you don't need the <script></script> tags
If this won't solve it or even if it will, add some debugging to your routes
https://stackoverflow.com/a/28750792/4050230
Hope this helps..
This should be easy for any one who knows Angular--I, on the other hand, am super new to it. I was trying to put together an easy example using ng-include but it's not clear why the variable inside the include is not updating.
I include some html in the page (not sure if ng-model is necessary):
<div ng-model="template" ng-include="template.url"></div>
I have a button:
<a class="btn btn-lg btn-success" ng-model="template" ng-click="switch()" ng-href="#">Change!</a>
that calls a function from the controller which looks like this:
app.controller('MainCtrl', function ($scope) {
$scope.templates =
[ { name: 'Template1', url: 'views/template1.html'},
{ name: 'Template2', url: 'views/template2.html'} ];
$scope.template = $scope.templates[0];
$scope.switch = function() {
$scope.template = $scope.templates[1];
console.log($scope.template);
return $scope.template;
};
}
);
The variable that shows up in the console? Correct. But nothing changes on the page.
UPDATE: So this code works. What's required is the removal of the href attribute, which in some cases was reloading the page. If that's true, then is there a way to do this in which there is a failsafe? i.e. the href works fine without javascript, but the ng-include works when javascript is working?
It looks okay, try it in this plunkr. The only thing I changed was the URL to the templates.
Here is a fiddle also showing that it works with and without ng-href.
<a class="btn btn-lg btn-success" ng-click="switch()" ng-href="#">Change!</a>
<a class="btn btn-lg btn-success" ng-click="switch()">Change!</a>
After seeing Sunil's comment, I added in bootstrap css to make it clear that href is not needed to get the desired styling. It can be removed without any problems. But, unfortunately, plnkr and jsfiddle are not reproducing the reload you experienced.