Avoiding modal panel to open if error in AngularJS

Question

I have the following method in a controller:

 $scope.showProductDetails = function (size,product) {

$scope.showLoader('Loading the details of the product. Please wait...');

    var modalInstance = $modal.open({
          templateUrl: 'productDetail.html',
          controller: 'ProductDetailController',
          size: size,
          resolve:{
            productDetails: function (){return productsFactoryHelper.ProductDetail.query({productid:product.id},function()
            {
            $scope.hideLoader();
            },function(error)
            {
                    commonFactory.Pop('error','This product is not available at this moment. Please try again later. If the problem persists contact a system administrator');
                    $scope.hideLoader();
            });}
          }

        });



};

As you can see, I'm opening a modal panel, and using 'resolve' to pass an object that I retrieve from the server. This call to the server can launch an exception, so I manage this case in the callback function for error, but I cannot avoid the modal panel to open if an error happens. I would like to know if there is a way to do that without changing the structure of the code. I mean I could achieve that just doing the call out of the resolve, before opening the modal panel, and depending if the call is successful or not , open the modal panel, but I would like to know if there is a way to do it inside the resolve, without changing the structure of the method.

Thanks

Brent Washburne · Accepted Answer · 2015-01-30 18:36:43Z

1

I think your idea of doing the call before opening the modal makes most sense in this case. In other words, only open the modal when it has the data.

Your other option is to display an error in the modal and change the contents/buttons accordingly.

answered Jan 30, 2015 at 18:36

Brent Washburne

13.2k4 gold badges65 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

levi · Accepted Answer · 2015-01-30 18:42:09Z

1

Inside error callback function, return error again. You need to return a promise, so, if the returned promise is an error, it shouldn't open.

  resolve:{
            productDetails: function (){return productsFactoryHelper.ProductDetail.query({productid:product.id},function()
            {
            $scope.hideLoader();
            },function(error)
            {
                    commonFactory.Pop('error','This product is not available at this moment. Please try again later. If the problem persists contact a system administrator');
                    $scope.hideLoader();
                    return error
            });}
          }

edited Jan 30, 2015 at 18:42

answered Jan 30, 2015 at 18:30

levi

22.8k7 gold badges79 silver badges76 bronze badges

2 Comments

fgonzalez Over a year ago

I don't have three functions assigned to a variable, the other two functions are the callback functions, so once the main function finish, if it was succesful it will call the success callback function, otherwise it will call the error callback function. I need to do some work as hidding the load bar once the function returns but before the modal panel is opened, so this is the way I do it.

levi Over a year ago

@fgonzalez ah ok, I got it, I think what is happening. Let me update my answer.

Collectives™ on Stack Overflow

Avoiding modal panel to open if error in AngularJS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related