AngularJS Bootstrap Modal Losing Scope

Question

У меня есть шаблон, загруженный ngRoute, который содержит модальный диалог загрузки. Когда пользователь пытается покинуть текущую строку, которую они редактируют в таблице, это диалоговое окно появляется, чтобы подтвердить, согласны ли они с потерей своих изменений.

Bootstrap modal вводит наложение на уровне тела, где, поскольку мой взгляд немного глубже этого. Поэтому модаль скрыта наложением. Если я добавлю модальный к тому же уровню, я могу увидеть наложение, но теперь область потеряна.

Есть ли способ связать область видимости каким-либо образом или зарегистрировать события, чтобы я мог продолжать общаться с контроллером?

Вот код, который я попытался: http://codepen.io/matthewrhoden1/pen/BzEBxQ в нем вы найдете точку, где я сдался, пытается отправить область модальности.

Имейте в виду HTML впрыскивается на более высоком уровне с этой линией:

$('#secondModal').insertBefore('#outerOverlay'); 

Answer 1

В конце концов я понял, что я могу прикрепить к корневой области. Содержимое модала не может быть динамическим по мере потери области. По крайней мере, я все еще могу подтвердить да/нет.

// The directive needs the $rootScope, the event will propagate down. 
// This is a bad practice but in my case I don't have any work arounds. 
app.directive('event', ['$rootScope', function($rootScope) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attr) { 
      element.bind('click', function(){ 
       $rootScope.$broadcast(attr.eventName); 
      }); 
     } 
    }; 
}]); 

// Thanks to bootstrap injecting the backdrop at the body level, 
// I need to do this to get my modal at the correct location. 
$('#secondModal').insertBefore('#outerOverlay'); 

Плюс наценка:

<div ng-app="myApp"> 
    <div class="container"> 
     <div class="content"> 
      <div class="ngView"> 
       <div ng-controller="TestCtrl"> 
        <h1>Angular Rendered Template</h1> 
        <div class="modal"> 
         Static Message 
         <button event data-event-name="test"> 
          OK 
         </button> 
        </div> 
        <div id="secondModal" 
         class="modal"> 
         Static message 
         <button event data-event-name="test"> 
          OK 
         </button> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="side-menu"> 
      <ul> 
       <li><a href="#">Link 1</a></li> 
       <li><a href="#">Link 2</a></li> 
       <li><a href="#">Link 3</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

<!-- backdrop injected here at bottom of the body -->