0

Using bootstrap modal with my angular forms. I can pass back models in my cancel/add functions because they are within the scope, but the overlay background div is outside. How do I pass back an object when the overlay is clicked?

HTML

<div id="add-contact" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" data-ng-model="itemInEditMode" data-ng-click="cancelAdd(itemInEditMode)">×</button>
    <h3>Add new contact</h3>
  </div>

  <div class="modal-body">

    <form class="form-horizontal add-inventory-item" ui-if="itemInEditMode != null">

            <div class="left-align-form">

                <div class="left-field span3">
                    <label for="">Full Name</label>
                    <input type="text" name="" id="" data-ng-model="itemInEditMode.fullName">
                </div>

                <div class="left-field span3">
                    <label for="">Position</label>
                    <input type="text" name="" id="" data-ng-model="itemInEditMode.position">
                </div>
                <div class="clear"></div>
            </div>

            <div class="left-align-form">

                <div class="left-field span2">
                    <label for="">Phone Number</label>
                    <input type="text" name="" id="" data-ng-model="itemInEditMode.mainPhoneNumber">
                </div>

                <div class="left-field span2">
                    <label for="">Mobile Number</label>
                    <input type="text" name="" id="" data-ng-model="itemInEditMode.mobilePhoneNumber">
                </div>

                <div class="left-field span2">
                    <label for="">Fax Number</label>
                    <input type="text" name="" id="" data-ng-model="itemInEditMode.faxNumber">
                </div>
                <div class="clear"></div>
            </div>

            <div class="span3">
                <label for="">Email Address</label>
                <input type="text" name="" id="" data-ng-model="itemInEditMode.email">
            </div>
            <div class="clear"></div>            

            <div class="left-align-form checkbox-group">

                <div class="left-field span1">
                    <label for="">Primary Contact</label>
                    <input type="checkbox" id="" data-ng-model="itemInEditMode.primaryContact" data-ng-checked="itemInEditMode.primaryContact">
                </div>

                <div class="left-field span1">
                    <label for="">Event Notifications</label>
                    <input type="checkbox" name="" id="" data-ng-model="itemInEditMode.eventNotifications">
                </div>

                <div class="left-field span1">
                    <label for="">Billing Notifications</label>
                    <input type="checkbox" name="" id="" data-ng-model="itemInEditMode.billingNotifications">
                </div>

                <div class="left-field span1">
                    <label for="">SMS Notifications</label>
                    <input type="checkbox" name="" id="" data-ng-model="itemInEditMode.smsNotifications">
                </div>

                <div class="clear"></div>
            </div>            

    </form> 

  </div><!-- end modal-body -->

  <div class="modal-footer">
    <button class="btn fooda-action-green" data-ng-click="saveContact()" data-dismiss="modal"><i class="icon-plus-sign"></i>Add</button>
    <button class="btn fooda-action-orange" data-ng-model="itemInEditMode" data-ng-click="cancelAdd(itemInEditMode)" data-dismiss="modal" aria-hidden="true"><i class="icon-minus-sign"></i>Cancel</button>
  </div>

</div><!-- end add-contact modal -->

jQuery function (for testing)

$('#add-contact').on('hide', function(itemInEditMode) {
    $scope.cancelAdd(itemInEditMode);   
});

Thanks!

Christopher Marshall
  • 10,678
  • 10
  • 55
  • 94
  • could you provide a pluncker url? – George Katsanos Feb 27 '13 at 19:00
  • We're using Angular quite a bit unconventionally with a lot of requireJs and dependency injection functionality. I tried to make a plunker but it'd be almost impossible to replicate. Thanks for your interest though! http://plnkr.co/edit/5lt1eqBxX3Dl5p26V7Dy – Christopher Marshall Feb 27 '13 at 19:52
  • thanks for taking the time to put it there. Uhm, it seems to work ok for me. what's the problem? – George Katsanos Feb 27 '13 at 20:39
  • The only thing that works is the modal really. I need to pass back that ng-model on the modal overlay click, but the overlay div is outside my controller. I need some way of passing on my model on overlay click/hide. – Christopher Marshall Feb 27 '13 at 20:45
  • See if either of these helps: http://stackoverflow.com/questions/12931369/click-everywhere-but-here-event and http://stackoverflow.com/questions/14574365/angularjs-dropdown-directive-hide-when-clicked-outisde – Mark Rajcok Feb 28 '13 at 00:01

0 Answers0