Material: feat(panel): Allow mdPanel to resolve a promise on close that was created on open

Created on 1 Jun 2016  路  9Comments  路  Source: angular/material

This is a feature request.. is there anyway to make a small change to the .close/.hide of the mdPanel so that we may send data? Right now it is very difficult to send data from the mdPanel back to initiating controller. Essentially following the exact same methodology that the mdDialog uses in the .hide that allows the code to send back data through the hide promise....

works as expected

Most helpful comment

@scriptsure I not sure I followed that. Let me try to rephrase and see if I got it right:

  1. There are two controllers, main-controller and dialog-controller. Let's assume dialog-controller is the one passed in $mdPanel.open(config).
  2. main-controller has some function doSomethingWhenClosed(data).
  3. When the panel is closed, you want to call doSomethingWhenClosed(data).

If this is the case, there's a few ways to implement it:

  1. In the config locals, pass the close function and call it from main-controller.
locals: {
  onClose: self.doSomethingWhenClosed
}

Then when you call close in dialog-controller, chain the onClose method for the promise. close is resolved with the mdPanelRef instance, so you can get any data you need. This has the benefit of being able to chain a success and failure.

close: function() {
  mdPanelRef.close().then(function(mdPanelRef) {
    onClose(mdPanelRef);
  });
}
  1. In the config onDomRemoved, call your function to resolve the promise. Something like:
$mdPanel.open(
  onDomRemoved: self.promiseToResolve.resolve(true)
).then(function() {
  self.promiseToResolve = $q.defer();
});

This method will allow you to return whether to resolve or reject the close promise, which can force the panel not to close.

All 9 comments

@ErinCoughlan - thoughts ?

@scriptsure All of the data should already be accessible through the hide promise. Each promise is resolved with the instance of the mdPanelRef, so any data that I could imagine passing back should already be there.

If there's a bug where the reference isn't being passed back, I 100% think that needs to be fixed, but I don't think we should restrict what is returned.

@ThomasBurleson Perhaps we need to improve the documentation to specify that every promise is resolved with self, so when chaining the user will always have access to the panelRef variables. Or we can extend the panel dialog demo to pass data back.

ok i guess i need to dig a little deeper on this... did not realize that you set the data on the mdPanelRef so that the calling controller has access to it... Would it make more sense to follow what the mdDialog does for passing results? People are used to this path... Or was there a specific use case for doing it that way?

@ErinCoughlan were you saying that the mdPanelRef is essentially a shared object between the calling controller and the mdPanel controller. OR you saying that the mdPanelRef is literally returned when the panel is hide/close is called? Just to be clear all promises seem to resolve instantly. So if I open a mdPanel it does not wait for some hide/close to resolve the promise. Make sense?

@scriptsure The panel does not have the same behavior as the dialog. The open promise is resolved on open. The close promise is resolved on close. The hide promise is resolved on hide. And so forth.

When those promises are resolved, they are resolved with the actual mdPanelRef object so that's it's available as the argument to any thens. The actual code is this:

MdPanelRef.prototype.open = function() {
  var self = this;
  return this._$q(function(resolve, reject) {
    var done = self._done(resolve, self);
    var show = self._simpleBind(self.show, self);

    self.attach()
        .then(show)
        .then(done)
        .catch(reject);
  });
};

I understand what you are trying to do and the way you can do that is by creating a deferred on open, and then resolving it on close. You have a lot more control with the panel than with the dialog.

erin i dont think i am really getting this one... there is no way that i can see to provide a hook that will notify the initiating controller that the panel has closed and the return data. The close is typically called by the controller that is attached to the open mdPanel... so how do you get the response back to the original controller. What this has done is prevented us from attaching the response from the mdPanel to the original controller... understand????

@scriptsure I not sure I followed that. Let me try to rephrase and see if I got it right:

  1. There are two controllers, main-controller and dialog-controller. Let's assume dialog-controller is the one passed in $mdPanel.open(config).
  2. main-controller has some function doSomethingWhenClosed(data).
  3. When the panel is closed, you want to call doSomethingWhenClosed(data).

If this is the case, there's a few ways to implement it:

  1. In the config locals, pass the close function and call it from main-controller.
locals: {
  onClose: self.doSomethingWhenClosed
}

Then when you call close in dialog-controller, chain the onClose method for the promise. close is resolved with the mdPanelRef instance, so you can get any data you need. This has the benefit of being able to chain a success and failure.

close: function() {
  mdPanelRef.close().then(function(mdPanelRef) {
    onClose(mdPanelRef);
  });
}
  1. In the config onDomRemoved, call your function to resolve the promise. Something like:
$mdPanel.open(
  onDomRemoved: self.promiseToResolve.resolve(true)
).then(function() {
  self.promiseToResolve = $q.defer();
});

This method will allow you to return whether to resolve or reject the close promise, which can force the panel not to close.

@ErinCoughlan Thanks for this!

This appears to have been resolved.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

diogodomanski picture diogodomanski  路  3Comments

LeoLozes picture LeoLozes  路  3Comments

bobber205 picture bobber205  路  3Comments

robertmesserle picture robertmesserle  路  3Comments

ghost picture ghost  路  3Comments