AngularJS中的确认模态

Question

I have an app that manages subscriptions.

<table>
  <thead>
    <tr>
      <th>Subscription Name</th>
      <th>Auto Renew</th>
    </tr>
  </thead>
  <tbody ng-controller="SubscriptionController as subCtrl>
    <tr ng-repeat="subscription in subCtrl.subscriptions">
      <td>
      {{ subscription.name }}
      </td>
      <td>
        <input type="checkbox" name="onoffswitch" class="autorenew onoffswitch-checkbox" id="switch-{{ subscription.id }}" value="1" ng-checked="subscription.auto_renew" switchtoggle="subCtrl.toggleAutoRenew({{subscription.id}})">
      </td>
    </tr>
   </tbody>
 </table>

The checkbox has a directive called switchToggle. I use this to manage the model because I need to be able to watch for the change and ask for a confirmation Modal. The Directive just runs the toggleAutoRenew function of the controller

/**
 *
 */
app.directive('switchtoggle', function () {
  return {
    restrict: 'A',
    link: function(scope, element, attrs)
    {
      element.bind('change', function(){ 
        scope.$apply(attrs.switchtoggle);
      });
    }
  };
});

What I haven't been able to figure out what to do is create a modal with confirm and cancel buttons. That way when someone clicks on the checkbox (which looks like an on off switch) I can confirm whether they really want it on or off.

help please....

Answer 1

So I'd like to also suggest using UI Bootstrap's Modal Dialog , but read the full answer before you string me up :)

First, here is a demo of your EXACT scenario .

Now let me walk through the code.

The only change I made to your markup was to drop the custom directive in favor of a simple ng-click handler.

ng-click="subCtrl.toggleAutoRenew($event, subscription)

Notice the $event I am passing in there, that is important because it allows us to be able to call .preventDefault() , which will stop the model from being updated, and give us a chance to show a confirmation dialog to the user.

The toggle method passes in the entire subscription object, and then simply cancels further event processing.

toggleAutoRenew: function($event, subscription) {
      var _this = this;

      $event.preventDefault();
      $event.stopPropagation();

      _this.confirmAutoRenew(subscription)
        .then(function() {
          subscription.auto_renew = !subscription.auto_renew;
        });
    }

We then make a call to another method responsible for showing the dialog that returns a promise .

If the promise is resolved , then we toggle the auto_renew flag on the subscription object and everything works as expected.

If the promise is rejected , then we do nothing, and the subscription is never updated. To the user, it's as though they never clicked the checkbox at all.

You can look at the example to see how that method is making use of UI Bootstrap and the $modal service to show a dialog and handle the result, but the logic is all inside the toggle method, and it's 100% handled by the controller .

Answer 2

Here you can see how to open modals: http://angular-ui.github.io/bootstrap/

Btw, here is how your input should look like:

<input type="checkbox" class="autorenew onoffswitch-checkbox" ng-model="subscription.auto_renew" ng-change="subCtrl.toggleAutoRenew(subscription)">