I have a page with an ion-navbar, when I navigate to the next page I use the following:
this.nav.push(SubCategoryPage, {
employeeModel: this.employeeModel
});
It passes the param parameter successfully to the next page.
When I am in the next page (SubCategoryPage), I update the parameter object (employeeModel). My question is, when I click the back arrow to return to the previous page, how do I pass the modified parameter object (employeeModel) back?
When back is clicked, the ngOnDestroy is called, do I use this, but then how do I pass the parameter object?
OR, is there some other scope I should put the object in? (How do you pass objects from one page to another, including back?) What's best practice?
Thanks
I recommending caching the object in a provider. That way, its properties will remain the same when navigating between your components. By caching, all I mean its a simple get and setter.
SOLVED:
in app.ts I need to set the object, then it is shared between pages
ionicBootstrap(MyApp, [EmployeeModel]);
ref: https://www.joshmorony.com/an-in-depth-explanation-of-providers-in-ionic-2/
Related
I am using stackView and with a button press I chance the page by using push and pop. I want to save same variable value and when I open the page again, I want to keep continue using that variable with its value when page is closed.That is why I declared the variables in the main qml :
Window{
id:main
property var isSomethingOn:false
StackView{
id:contentFrame
initialItem:Qt.resolvedUrl("qrc:/MainPage.qml")
Connections{
target:contentFrame.currentItem
onBackButtonPressed:{
contentFrame.pop()
}}}}}
and in the other page I use that variable like:
Item{
id:Page1
signal backButtonPressed()
Image{
id:button1
MultiPointTouchArea{
main.isSomethingOn = !main.isSomethingOn
if(main.isSomethingOn){
button2.buttonImageColor="Imgs/button_left_red.png"
}
else{
button2.buttonImageColor="Imgs/button_left_blue.png"
}
}
}
Now I expect isSomethignOn to be saved and not to be deleted between page transitions. But it indeed get deleted. How can I solve that issue?
The value is getting saved, but you probably can't tell because bindings don't automatically work with var properties. var properties do not automatically notify when their value changes. You can manually trigger them by calling isSomethingOnChanged(), but there's no reason to do that unless you actually need your property to be a var. In your case changing it to a bool should be all you need to do.
For your additional question about push and pop, see the docs. Particularly this line:
This means that any item pushed onto a StackView will never be
destroyed by the StackView; only items that StackView creates from
Components or URLs are destroyed by the StackView.
//I want to redirect to another page after the subscribe method, but //router.navigate not working in subscribe method.
//I tried storing the data coming from subscribe into a variable but the //variable is being declared undefined
onAddCustomer() {
this.bill.addCustomer(this.form.value).subscribe(data => {
this.router.navigate[`/addBill/${data.data._id}`];
});
}
//I want to navigate to addBill page after adding the customer with the //customer id which i am getting from the data
router.navigate is a function, and in the syntax of your example, you are trying to access a property of the navigate function.
Basically, I think you're missing parenthesis:
this.router.navigate([`/addBill/${data.data._id}`]);
I have an AngularJS application that manages badges. In the application is a form to set the badge # and the name of the person it is assigned to, etc. This gets stored in $scope.badge.
When the user submits the form, I want to add the new badge to a list of badges, which is displayed below the form.
Partial code looks like this:
var badge = angular.copy($scope.badge); // make a copy so we don't keep adding the same object
$scope.badgeList.push(badge);
The first time I run this code, it adds the badge as expected.
Any subsequent time I run this code, the next badge REPLACES the previous badge in the badgeList. In other words, if I add 5 badges, the badgeList still only has 1 object in it because it just keeps getting replaced.
I'm thinking that this may be happening because the same object keeps getting added? Maybe I'm wrong? I am using angular.copy to try and avoid that happening, but it doesn't seem to be working.
Any thoughts on this?
$scope.badgeList.push(($scope.badge);
console.log($scope.badgeList)
no need to use angular.copy since you are ultimately storing all the badges in an array
angular.copy is used when you want to make a clone of object and not update the existing object and the clone's change are not reflected in main object.
If you just want to maintain a list of badges you can execute this block of code
like this
function addBadges(){
$scope.badgeList.push(($scope.badge);
console.log($scope.badgeList)
}
If you are refreshing the controller then obviously the variable will be reset and for such a case you need to make use of angular services.
Create a service and inside the service you need to define getter and setter method that will help in data persistence
and your bages array if saved in service will persist till the application is in foreground.
You could do something like this.
function addBadges(){
//initialize if undefined or null
if(!$scope.badgeList){
$scope.badgeList = [];
}
//Check if badge does not exists in the list
if ($scope.badgeList.indexOf($scope.badge) === -1) {
//Add to badge list
$scope.badgeList.push($scope.badge);
}
}
I noticed a behavior in Ember that does not make any sense to me. I am not sure if this is a bug or feature. In the latter case I am really interested why this is a desired behavior. So here we go:
Make sure you can see your browsers console output.
Open the example project on JS Bin. Notice the two init messages comming from IndexController and FoobarController.
Click on the button saying 'Add one'. Do this so that there is some state on the FoobarController.
Click on the 'Go to hello' link to transition to the hello route
Go back to index via the link
The count variable still has the value. All good!
Now there is a tiny change in the next JS Bin. I pass the model to the render helper.
Follow the steps above again. After step 5 you see that count is 0 now and that the 'init FoobarController' appears again.
Somehow a controller belonging to a render helper gets reset when a model is passed. I can't find any information on why this happens or think of any reason why this makes sense.
From the Docs
If a model property path is specified, then a new instance of the controller will be created and {{render}} can be used multiple times with the same name.
Passing that second param re-instantiates the FoobarController, which basically resets the count to 0, whereas not passing the model param creates a singleton instance of the FoobarController.
I have some route like /ads/:ad_id and from my controller I can do
this.transitionToRoute('ads.ad', adObj)
How can I do the similar thing but this time passing the ID instead of the loaded object?
O course I understand that I can load an obj by ID first, but Ember's power is in doing lost of boilerplate for us.
Update: So, as by default Ember serializes the model to URL params by doing like
mode_instance -> { model_name_id: model_instance.id }
My trivial attempt was doing
this.transitionToRoute('ads.ad', { id: adObjId })
But when passed a model object Ember does not re-fetch it.
So, the question: I have a route (single ad view) that depends on ad ID. I have this ID as number. I want to transition to this route like if I simply entered the url /ads/ID
This can be accomplish by passing the URL to transitionTo. For example,
this.transitionToRoute('/ads/' + adObjId)
The model() method will be called with the params from the URL.
Here is a use case for this:
Transitioning from a list view to a detail view. In the list view, the records don't have any relations tied to them, but the detailed view should side-load relational data. For this reason, the models are not 1:1 between the list view and detailed view. There should be a way to transition simply using the id.
Cp
What's your use case for this? Most cases when you would want to specify an object by id, you already have the object to pass to transitionTo. Can you provide more context about what you're trying to do? I think you can probably accomplish it without using the object id.
In any case, I don't think there's a good way to do this, because when you transition via transitionTo(someRoute, someModel), the route's model hook is not called, and the model you pass in (someModel) is supplied directly to the other route hooks (setupController(controller, model), redirect(model), renderTemplate(controller, model)).
See Ember.JS Route api -- model method for more details.