2

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....

4
  • Do you use a certain library and want to know how to open a confirmation dialog? Or do you want to know how to call the built-in function confirm? Or is it something else you want to know? Jan 22, 2015 at 14:05
  • I do not use a certain library. I want to know how to do it. I want to know 1) open on change 2) then read when a confirm or cancel has been selected.
    – thenetimp
    Jan 22, 2015 at 14:30
  • Still not clear. But you can do var ok = confirm('please confirm you choice'); if that suits your need. Jan 22, 2015 at 14:33
  • I do NOT want to use a javascript confirm. I want to open a modal box that can be styled that has 2 buttons on it. The buttons need to talk back to the controller scope telling me if they confirmed or cancelled.
    – thenetimp
    Jan 22, 2015 at 14:46

2 Answers 2

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.

2
  • I don't string people up who actually explain code. I only string them up if they throw links at me with no explanations. I'll give this a try when I start my work day in a few hours and let you know how it goes.
    – thenetimp
    Jan 23, 2015 at 2:40
  • Since I am using bootstrap and the example code you provided helped me do what I needed to get done I gave you the answer checkmark. I would really love to understand how to do this without bootstrap and without bootstrap-ui. Actually knowing how it works in the background (ie the $modal state) would be useful. I'll have to sort that out later I guess.
    – thenetimp
    Jan 23, 2015 at 6:08
-1

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)">
5
  • That doesn't answer the question please don't throw un-useful answers that do NOT answer the question. ng-change or change binding in an directive do the same thing.
    – thenetimp
    Jan 22, 2015 at 14:31
  • Documentation and examples on modals do not answer question about opening modals? ok. Jan 22, 2015 at 14:42
  • Opening the Modal is NOT the problem. Connecting back to the controller with the "confirm" and "cancel" button is the problem. therefore this was not helpful.
    – thenetimp
    Jan 22, 2015 at 14:45
  • from angular-ui.github.io/bootstrap: $scope.ok = function () { $modalInstance.close($scope.selected.item); }; $scope.cancel = function () { $modalInstance.dismiss('cancel'); }; But as I see for you Ok/Cancel buttons wont fit - u need Confirm. Jan 22, 2015 at 14:48
  • No it doesn't because that $scope belongs to ModalController and NOT to SubscriptionController. This creates a whole new controller that is outside the realm of the controller I am working in. I need to talk back to the SubscriptionController. I spent ALL day looking at THIS exact code. It does not answer my question.
    – thenetimp
    Jan 22, 2015 at 15:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.