AngularJS Bootstrap模式丟失範圍

我有一個由ngRoute加載的模板，其中包含一個引導模式對話框。當用戶試圖離開他們在表格中編輯的當前行時，會彈出此對話框以確認他們是否可以丟失其更改。AngularJS Bootstrap模式丟失範圍

Bootstrap模態的身體層次注入覆蓋層，因爲我的看法比那更深一點。因此，模態被覆蓋層隱藏。如果我將模態注入到同一級別，我可以看到疊加層，但現在範圍已經丟失。

是否有辦法以某種方式綁定示波器或以其他方式註冊到事件，以便我可以繼續與控制器通信？

下面是我試過的代碼筆：http://codepen.io/matthewrhoden1/pen/BzEBxQ其中你會發現我放棄的一點是試圖將範圍發送到模態。

記住的HTML是在這條線更高的水平被注入：

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

來源

2016-08-18 Matthew Rhoden

最後，我想，我可以附加到根範圍內。範圍丟失時，模態的內容不能動態顯示。至少這樣我仍然可以確認是/否。

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

來源

2016-08-19 13:24:06

AngularJS Bootstrap模式丟失範圍

回答

相關問題