如何在bootstrap模态叠加点击上将模型传递回回调函数

Question

使用我的角形式的bootstrap模态。我可以在取消/添加功能中传回模型，因为它们在范围内，但覆盖背景div在外面。如何在单击叠加层时传回对象？

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函数（用于测试）

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

谢谢！