I am fairly new to angular, I am making an app which has in app purchases. The current method I have for loading in the products is being called through using ng-click. What I want is for this method to be called when the page loads so I have tried using ng-init but unfortunately this doesn't work.
Below is the links to the code I have tried and used:
https://gyazo.com/645e9a0554aab8d11f6d96b2b159a833
https://gyazo.com/68d305ab5ffdbf94db4cda5539313947
Thanks in advance
Ionic will automatically load anything inside the controller when a user goes to that page.
.controller('LoadItemsCtrl', function($scope) {
loadItems();
function loadItems(){
//Code Here
}
})
Related
I am using the angular-ui-swiper and I want to set the active slide depending on the URL-Parameter. I have an angular controller, where the data is loaded for the swiper. This works fine, the buttons are working (prev, next). I call the method slideTo to set the activeslider after link click in the navigation. But it is not working if I load the page with the special parameter. The swiper-instance is not defined. So I have to call the correct page lifecycle event. I used the load, init-events, an equivalent to document ready, but without any success. It is only working if I put my setActiveSlide-Method to the scroll-event :D
Do you have any idea?
Thanks in advance
Maybe you need to make the set the activeslider in this kind of block:
angular.element(document).ready(function () {
//code here
});
Can you make a jsfiddle so we can see your code?
Setting:
I have an angular app.
What I have:
I have this: ui-sref="providerDetail({id:provider.id})" functioning.
It is a functioning link to a page giving details on a given provider.
What I want:
I have a button that submits a form and makes a new provider. This works. But I also want this button to forward the user to that new provider's detail page.
I have a function running that prints the id of the new provider to the console when it is made, I just can't figure out how to forward the user to the appropirate location.
Note:
I can add this to the function:
window.location = "/dashboard.html#!/providerDetail/" +id;
And it will take me to the new page, but I get this impression that this is a bad route to take.
Don't manually change the URL in AngularJS application, do it in Angular way so that you don't need to worry about manually kick of digest cycle. From function you could call $state.go method to navigate between states.
function myFunction(id) {
$state.go('providerDetail', { id: id})
}
Note: Please make sure you inject $state inside you controller.
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 use $interval and need to detect when the controller is destroyed. Until now, I have used the $destroy event and it worked perfectly. For example with this basic code, it prints "destroy" in the console when I go to another page (with a simple <a href="#/myNewUrl"> in myView.html).
angular.module('myModule').controller('myController', ['$scope', function($scope) {
$scope.$on('$destroy', function() {
console.log('destroy');
});
}]);
But since I updated Ionic to the new version (v1.0.0-beta.14), that uses the new version to Angular too (v1.3.6), the $destroy event isn't detect when I go to another page.
Does anybody get the same problem? How can I be resolve it?
Thank you for your answer!
EDIT:
I have finally fixed the problem!!! Now, with the new Ionic version, the view is cached automatically. Adding cache-view="false" in the template disable it.
But I found a best way than the destroy event. Ionic added new events (on $ionicView) and now you can detect when you leave the page (and the page stays cached) with: $ionicView.leave.
To get more information: http://ionicframework.com/docs/nightly/api/directive/ionView/
Is your template cached? If you don't have cache: false in your state routes, then the controller is not destroyed.
http://forum.ionicframework.com/t/how-to-destroy-controllers-in-ion-tab-directive/16658
It's a hello from Ionic dev team. They like to leak memory, you see.
Just set
$ionicConfigProvider.views.maxCache(0);
That should do it
I am using the following library to access IndexedDB in Angularjs on a new Chrome App: https://github.com/aaronpowell/db.js
When I try to update the UI on App startup by using this :
db.orders.query().all().execute().done(function(results) {
$scope.ordercount = results.length;
});
in my main.html I have used the ordercount variable as:
Orders : {{ordercount}}
However, the UI is not updating unless I do ng-click or any other ng-* events. All I need is to show number of orders when my app is loaded. I tried $scope.apply(), but it throws error saying apply() is not available.
Please help.
Since you are getting the values from out side of the angular js you need to do it like this,
$scope.$apply(function(){
$scope.ordercount = results.length;
})
It seems like you access $scope from out side of the angular world. You should get scope object first if you want to notify angular that the data had been updated.
//assume you have a controller named "dbCtrl" e.g., <div id="container" ng-controller="dbCtrl"></div>
angular.element($("#container")).scope().$apply(function(){
$scope.ordercount = result.length;
});
Hope this is helpful.