I'm actually doing an app for a stage, which has to be responsive design. So it has to work on Mobile, Computer and Tablet. For this app I need to use the google api Place Autocomplete. The problem with that is that it doesn't work on mobile, whether it's iOS or android... on another forum i found a piece of code which is the following, supposed to resolve this problem :
.directive('disableTap', function($timeout) {
return {
link: function() {
$timeout(function() {
// Find google places div
_.findIndex(angular.element(document.querySelectorAll('.pac-container')), function(container) {
// disable ionic data tab
container.setAttribute('data-tap-disabled', 'true');
// leave input field if google-address-entry is selected
container.onclick = function() {
document.getElementById('autocomplete').blur();
};
});
},500);
}
};
});
The problem is that i've never used Angular JS in my life and i do'nt have the time to learn it now, maybe after i'm done with the app... and this function is supposed to make it works on mobile, but i don't know how to use it. Could you guys give me a hand and explain me how to insert this code in my project and how to use it? I'm really in need and some help would be very appreciated. by the way, i'm not english native so if you didn't udnerstand something in my post just tell i'll try to say it better ^-^
I hope you will be able to help me, thanks :)
This should be the same in jQuery, but you have to adapt it yourself. You require also the underscore.js library. Hope this helps.
window.setTimeout(function() {
// Find google places div
_.findIndex($(document.querySelectorAll('.pac-container')), function(container) {
// disable ionic data tab
container.setAttribute('data-tap-disabled', 'true');
// leave input field if google-address-entry is selected
container.onclick = function() {
$('#autocomplete').blur();
};
});
},500);
Related
How can I automatically close the $cordovaInAppBrowser when it goes to my website and returns content "OK"? I would like to do this to avoid displaying the close button in the browser window.
Does anyone know how I can achieve this?
I did find the website that can solve this for those who also need to self close the browser in some condition.Here is the reference link : https://developer.salesforce.com/forums/?id=906F00000009ALSIA2
sample coding:
authWindow.addEventListener('loadstop', function(e) {
var loc = e.url;
//when url is changed check if the url contains your specific callbackURL
if (loc.search(data.callbackURL) >= 0) {
//at this point close your inapp browser
//you will land on the index page within your application.
authWindow.close();
//your code after successful authentication
}
});
you can use something like a timeout function or other than that a even listener other than i would suggest make a custom plugin and use it. The solution provided by #Blouraf is very hacky.
I did find some documentation on the cordova plugin that recommends a listener.
When I build the hybrid app using crosswalk - android Back button is not working with onsen ui framework(using angular js).
Below is the code which i have used...
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown() {
// Handle the back button
alert("Backbutton is pressed!");
var element = document.querySelector(".navigator-container");
var scope = angular.element(element).scope();
scope.popPage();
}
As #kabaehr mentioned you may need to wait for everything to be ready first. That means either of the following:
document.addEventListener('deviceready', function(){ ... });
ons.ready(function(){ ... });
The other thing which may be specific to Onsen UI is the fact that it's already doing some handling of that event, so you could try to use the API which is given for that.
Here are the docs for that API. Currently it seems like the method which you want is:
ons.setDefaultDeviceBackButtonListener(onBackKeyDown)
Although that method doesn't sound too nice so maybe the name will change in the future.
For now feel free to try if any of these options seem to work for you.
Having trouble with always rendering google maps in my Ionic app. When I first land on a view from a list of items on the previous view, the map always renders in its complete state. However, if I go back to the previous view and tap a different business, or even the same one, it appears as if the map is only rendering 25% of the complete map. I'm having this issue on both the emulator and on my iPhone.
Example
Code
getData.getBusinesses()
.then(function(data) {
// get businesses data from getData factory
})
.then(function(data) {
// get businesses photo from getData factory
})
.then(function(data) {
// get some other business stuff
})
.then(function() {
// get reviews for current business from separate async call in reviews factory
})
.then(function() {
// instantiate our map
var map = new GoogleMap($scope.business.name, $scope.business.addr1, $scope.business.city, $scope.business.state, $scope.business.zip, $scope.business.lat, $scope.business.long);
map.initialize();
})
.then(function() {
// okay, hide loading icon and show view now
},
function(err) {
// log an error if something goes wrong
});
What doesn't make sense to me is that I'm using this exact code for a website equivalent of the app, yet the maps fully load in the browser every time. The maps also fully load when I do an ionic serve and test the app in Chrome. I did also try returning the map and initializing it in a following promise, but to no avail.
I've also tried using angular google maps, but the same issue is occurring. I think I might want to refactor my gmaps.js (where I'm creating the Google Maps function) into a directive, but I don't know if that will actually fix anything (seeing as angular google maps had the same rendering issue).
I don't think the full code is necessary, but if you need to see more let me know.
EDIT
It seems that wrapping my map call in a setTimeout for 100ms always renders the map now. So I guess the new question is, what's the angular way of doing this?
I'm seeing similar issues with ng-map in Ionic. I have a map inside of a tab view and upon switching tabs away from the map view and back again, I would often see the poorly rendered and greyed out map as you describe above. Two things that I did that may help fix your issue:
Try using $state.go('yourStateHere', {}, {reload: true}); to get back to your view. The reload: true seemed to help re-render the map properly when the map was within the tab's template.
After wrapping the map in my own directive, I found the same thing happening again and wasn't able to fix it with the first suggestion. To fix it this time, I started with #Fernando's suggestion and added his suggested $ionicView.enter event to my directive's controller. When that didn't work, I instead added a simple ng-if="vm.displayMap" directive to the <ng-map> directive and added the following code to add it to the DOM on controller activation and remove it from the DOM right before leaving the view.
function controller($scope) {
vm.displayMap = true;
$scope.$on('$ionicView.beforeLeave', function(){
vm.displayMap = false;
});
}
Hope that helps.
don't use setTimeout on this!
You need to understand that the map is conflicting with the container size or something (example: map is loading while ionic animation is running, like swiping).
Once you understand this, you need to set map after view is completely rendered.
Try this on your controller:
$scope.$on('$ionicView.enter', function(){
var map = new GoogleMap($scope.business.name,
$scope.business.addr1, $scope.business.city,
$scope.business.state, $scope.business.zip,
$scope.business.lat, $scope.business.long);
map.initialize();
});
I've been trying to develope some mobile app and I'm thinking of picking up AngularJS+ZeptoJS.
But there is one problem - I couldn't find anything about accessing the bluetooth actions with Angular. I've looked through some tutorials but haven't find a single word about it. I've been thinking if it is even possible?
I mean - accessing bluetooth in mobile-app ( created in angularjs, converted in phonegap ). Not mobile-web.
I'm quite new with mobile app programming so please don't hurt me :)
And also a little bit desperate to get the answer..
It looks like there is a PhoneGap plugin for accessing Bluetooth:
https://build.phonegap.com/plugins/23
Once you get the plugin installed, you can access it via Angular. I recommend creating a service for interacting with it. It will go a little something like this:
App.factory('bluetooth', function() {
var bluetoothSerial = cordova.require('bluetoothSerial');
return {
sendMessage: function(message) {
// interact with bluetoothSerial
}
};
});
Then, your controllers can require it:
App.controller('appCtrl', function(bluetooth) {
$scope.communicate = function() {
bluetooth.sendMessage("all your base are belong to us");
};
});
Good luck!
I have no idea, how to explain this properly, but i try my best.
I have worked with flowplayer in jquery mobile (with multipage).
I have about 20 video sourced from database.
Now the problem:
I don't want all the videos start loading, when i start the video.
I have tried to make javascript to start correct video with '' tag, but it needs two clicks to start video.
Here is link i'm using (sorry, some forms are in finnish) http://www.rakentaja.fi/test/mobv/3mobvid.asp
Don't bother to go in front page, because i haven't finished those sites.
just pick any of the links and watch what happens.
Please, use google chrome, it's only browser which is the only one what works.
Thank you!
Avoid using inline Javascript functions, do it this way.
$('a.ui-link').on('click', function() {
aloitavid(61,'Valloxsuodpuhdvaihto');
});
Since each link has different parameters; you need to add those to the <a> link attributes and then pull them to be used in your function.
Update
You could do the below. Save video parameters as an attribute vlink, then read parameters and pass them to your function aloitavid(). Example here.
HTML
start video
Code
$('a.ui-link').on('click', function () {
var vlink = $(this).attr('vlink').split(",");
var value1 = vlink[0];
var value2 = vlink[1];
aloitavid(value1,value2)
});
This results
value1: 60
value2: Valloxyleistailmanvkoneenhuollosta
Try to put links to hardcoded
Back
if it's posible.
That won't be nice, but it works.