Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by James Andrews
James Andrews
7,245 Points

Confirmation modal with AngularJS

I have an app that manages subscriptions.

  <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....
Rock Hudson
Rock Hudson
27,595 Points

Personally, I would use ng-change and fire a function within the controller... directives are cool, but let me ask you this... do you need this functionality on multiple pages?