0

I am using $mdDialog service of AngularMaterial. Here's the sample code that I am using -

var highlighter = {};
$mdDialog.show({
    templateUrl: 'sample.html',
    parent: angular.element(document.body),
    clickOutsideToClose: true,
    bindToController: true,
    onRemoving: function (event, removePromise) {
        if(highlighter.answer!==1) {
            //Do something here
        }
        highlighter.answer = undefined;
    }
})
.then(function (answer) {
    highlighter.answer = answer;
});

the promise which is returned by show() method resolves only when any of the buttons in mdDialog are clicked. The index of the buttons is provided as answer parameter. I need to do something only when the answer/button index is not equal to 1.
The problem is onRemoving gets called before resolving the promise when any of the buttons is clicked, so the highlighter.answer didn't get the proper value when it's needed (In onRemoving callback).

In other words, onRemoving gets called whenever any of the buttons is called or when the dialog is dismissed without clicking the buttons. the promise gets resolved only when the button is clicked.

So my question is, is there any way to have any callback which will get called after the promise is resolved (then is called), so that the answer value is set and I know whether a button is called or not. This callback should get called on removing the dialog whether the promise is resolved or not.

0xC0DED00D
  • 19,522
  • 20
  • 117
  • 184
  • Isn't it simpler to just make a dialog without a close/dismiss button? I don't know the library you're using but I'm sure its an option somewhere. Another option is to just throw the dialog again until an answer is selected. – Halcyon Jan 31 '17 at 15:42
  • @Halcyon it's not clear that the dislog can be dismissed by just clicking outside, so a dismiss button is required. And the second suggestion sounds like a bad UX design. – 0xC0DED00D Jan 31 '17 at 16:01

1 Answers1

0

I forgot the point that mdDialog uses q library for promises and it has a finally action too. I just had to add the finally action and put the onRemoving code there. I could then remove the onRemoving listener. The final code looked like this -

$mdDialog.show({
    templateUrl: 'app/modules/hire/common/views/annotation.html',
    parent: angular.element(document.body),
    clickOutsideToClose: true,
    bindToController: true
}).then(function (answer) {
    highlighter.answer = answer;
}).finally(function () {
    if(highlighter.answer!==1) {
        //Do something here
    }
    highlighter.answer = undefined;
});

This answer helped me in finding the solution.

Community
  • 1
  • 1
0xC0DED00D
  • 19,522
  • 20
  • 117
  • 184