AngularJS Bootstrap Modal Losing Scope

Question

Ich habe eine Vorlage von ngRoute geladen, die einen modalen Bootstrap-Dialog enthält. Wenn der Benutzer versucht, die aktuelle Zeile, die er bearbeitet, in einer Tabelle zu belassen, erscheint dieses Dialogfeld, um zu bestätigen, ob die Änderungen in Ordnung sind.

Bootstrap Modal injizieren eine Overlay auf der Körper-Ebene, wo meine Sicht ist ein wenig tiefer als das. Daher ist das Modal durch die Überlagerung verborgen. Wenn ich das Modal auf die gleiche Ebene injiziere, kann ich das Overlay sehen, aber jetzt ist der Umfang verloren.

Gibt es eine Möglichkeit, das Oszilloskop irgendwie oder auf andere Weise an Ereignisse zu binden, damit ich weiterhin mit dem Controller kommunizieren kann?

Hier ist der Code-Stift, den ich versuchte: http://codepen.io/matthewrhoden1/pen/BzEBxQ darin finden Sie den Punkt, wo ich aufgegeben habe versucht, das Zielfernrohr an das Modal zu senden.

Beachten Sie die HTML auf einer höheren Ebene mit dieser Leitung eingespritzt wird:

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

Answer 1

Schließlich Ich stellte dar, dass ich an den Stammbereich anbringen kann. Der Inhalt des Modals kann nicht dynamisch sein, da der Bereich verloren ist. Zumindest kann ich auf diese Weise ja/nein noch bestätigen.

// 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'); 

Plus-Markup:

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