Angular Service Modal关闭异常且多次触发，关联GitHub Issue #225

Hey there, let's break down the possible causes for your angular-service-modal closing/hiding being triggered multiple times, since you've already ruled out the $rootScope.$on issue mentioned in Issue #225:

1. Duplicate Close Event Bindings in showPopup #

Even without using $rootScope, if your showPopup method binds a close callback every time it's called, you'll end up with multiple callbacks queued to run when the modal closes. For example:

// Problematic code pattern
function showPopup(productId, actionType) {
  const modalInstance = $modal.open({
    // modal config
  });
  // This callback gets added EVERY time showPopup runs
  modalInstance.result.then(() => {
    // Your close-handling logic
    processBuyImmediate(productId);
  });
}

If showPopup is called multiple times (even if only one modal is visible), each call adds a new then handler. When the modal closes, all handlers fire.

Fix: Ensure you only bind the callback once, or clean up previous bindings before adding a new one. Alternatively, move the callback logic to a place that doesn't re-run on each showPopup call.

2. Multiple Controller Instances #

If the controller associated with your modal (or your ShopActionController) is being instantiated multiple times, each instance might register its own close-related logic. For example:

• If your modal uses a controller string (e.g., controller: 'ModalCtrl') instead of a singleton instance, a new controller is created every time the modal opens.
• If you're binding close logic inside the controller's $onInit or constructor, each instance will run that code.

Check: Add a console.log('Modal controller initialized') inside the modal's controller and see if it prints multiple times when you open the modal.

3. Accidental Multiple Calls to showPopup #

It's possible showPopup(ProductId,'BuyImmediate') is being triggered more than once without you noticing. This could happen from:

• Duplicate click event bindings on the trigger button (e.g., using ng-click and a manual addEventListener).
• A $watch or other reactive trigger that fires multiple times.

Check: Add a log inside showPopup to track how often it runs:

function showPopup(productId, actionType) {
  console.log(`showPopup called: ${productId}, ${actionType}`);
  // Rest of your code
}

If you see multiple logs for the same product ID, trace back to where this method is being called to fix the duplicate triggers.

4. Multiple Close Triggers #

Your modal might be receiving close signals from multiple sources. For example:

• A close button in the modal template using ng-click="$close()" AND code elsewhere calling modalInstance.close().
• Using $modalStack or other services to manage modals that are also listening for close events.

Check: Audit all places that could trigger the modal to close, and ensure only one path is used per interaction.

5. Version-Specific Bug in angular-service-modal #

Even though Issue #225 focuses on $rootScope, there might be other version-specific bugs that cause duplicate close events. Check if you're using an older version of the library, and try updating to the latest stable release to see if the issue resolves.

Quick Debugging Steps #

1. Add console.trace() inside your close callback to see the call stack for each trigger—this will show you exactly where each close event is coming from.
2. Inspect the $modalStack service (if available) to see how many modal instances are active at once.

内容的提问来源于stack exchange，提问作者NicoJuicy