On one of my pages (which has
<button class="button button-small button-balanced" data-ion-modal="reviewPopup">
leave review
</button>
in that Modal I have a form that, when I click a button for, should send data to the server from both the Modal and the template from template a. I can get data from the form in the Modal just fine, but I can't access any data from the calling page (specifically I need the _id). Calling Template.parentData just returns null.
Instead of triggering the modal from the template using data-ion-modal="reviewPopup", you can trigger the Modal from your button event, for example -
Template.templateName.events({
'click #review-popup': function() {
//capture data from parent template first
//....
var parentDataContext = {some data}
IonModal.open("reviewPopup", parentDataContext);
}
})
After the modal opens, the parent data can be accessed using this in the modal helpers.
I believe that Template.parentData (from the modal) will be returning either the body template, or another top level template specific to the meteoric framework. Either way,
If you were using a different framework where you specifically add the modal template to the page somewhere I'd suggest passing in _id as a template parameter.
But with meteoric, as far as I know, you can't do that - so you may have to use something with global scope.
If you are using a router, and have the _id as part of the route, get it from there (e.g. FlowRouter.current().params ).
Or just use the simplest option and use a Session variable. Set it in a onRendered function, access it in the Modal's event functions
Related
I have a crud application where i click on the delete button and it should reflect me a modal, in which i want to ensure delete or not ,while clicking on delete it should delete the data specific.
I have Tried calling it,but i don't know to pass the actual data is not getting it is reflecting me undefined.what should i do for passing the data from one component to another page modal component.
giving you stackbltiz.
while clicking on delete button after confirmation it should delete.and getting error of the undefined id.
You are using ng-bootstrap modal. You can open the modal using the syntax after importing the deleteModalComponent :
modalOptions: NgbModalOptions;
let modalRef = this.modal.open(DeleteModalComponent, this.modalOptions);
When you are in the deleteModalComponent then you can use this:
modalRef.componentInstance.deleteEvent.
pipe(takeWhile(() => keepPvSubscription)).
subscribe(delete => {
modalRef.close();
},
});
I have home page that lists items, but also when I add an item I want to popToRoot(), to home page. Now, If I come to root from addItemPage, I want to show the button to save a list, to make a HTTP call..
Is it possible, I was thinking about passing the for example (fromAdd: true) to navCtrl and then based on that show the button(ngIf) ?
You can use any of the rootscope variables, navparams and service to set the value on the parent page and then access it in your ng-init function declared on you child page and show your button on the basis of that value by using ngIf expression.
I have a template where recipes are rendering through {{#each recipes}} and I'm using ReactiveVar to toggle the edit form of each recipe from hide to show. Everything works fine, but I want that when I press edit button in one recipe then all other recipe forms, which were opened before, will set to hide
Template.Recipe.onCreated(function(){
this.editMode = new ReactiveVar(false);
});
Template.Recipe.helpers({
editMode: function() {
return Template.instance().editMode.get();
}
});
Template.Recipe.events({
'click .fa-pencil': function(event, template) {
//Right here I guess should be something that switches all "editMode" to false
template.editMode.set(!template.editMode.get());
},
});
I think you need a different approach
a Session variable which has the Id of the current editing recipe and then helper on the template to see if the current recipe is the one being edited
add a property to the recipe whether its being edited or not, then update the collection when you change which one is edited
A common object with a reactive var, and much the same technique as the Session variable. If you have a parent template, then it could live there (this is probably the nicest option)
In order to achieve this functionality, you should think about how your templates communicate. One template shouldn't be able to set the state for it's siblings, which means you are thinking it wrong.
You should store that state somewhere global so all templates can see and react to it. That option would mean using Session (as Keith mentioned) or a route parameter (better option, in my opinion).
Another option is to use the parent to store that data, using events to communicate between parent and children. A child template can send and event to the parent who direct another event to each other child.
I use Bootstap table to present collection. In my table last column is button for details. After click on it, I want to display dialog, which will be filled by model from MVC action.
So, how can I do this:
Click on button in row (there is <a href='MVC_action\ROW_ID'>
MVC_action will be executed and return model
Model is pass to view and dialog is visible with filled data.
Do not use <a href> for the button. That will make a refresh on the page. Instead, create a button and add a javascript event handler, like <button onclick="detail(ROW_ID)">
The detail() function will call MVC_action\ROW_ID. The result from this call must be injected in a hidden div which handles the bootstrap dialog.
MVC_action returns a partial view with the content of the dialog.
After the injection, you must open the dialog.
Here you can see an example of an ajax call and a Bootstrap modal.
Greetings
I want to hide a list of users when I to display the nested view users.info .
I wrote this code
HTML
<div ng-hide="hide">
the list of users...
<a ui-sref="users.info"> <button ng-click="hideUsersList()"> </a>
</div>
Controller
$scope.hideList = function hideList()
{$scope.hide=true;};
it works and hide the list when I click on the button, but the problem is when I use the back button in the browser, hide still 'true' and I get a blank page
If you only hide the DOM element, the scope remains and the hide variable is still attached to it with the latest value.
If I understand correctly, what you are looking for is maybe switching the nested views when moving between states, that way each time you move to a new state you'll be instantiating a new controller and a new scope.
Nested States, Nested Views