AngularJS Bootstrap模式丢失范围

问题描述：

我有一个由ngRoute加载的模板，其中包含一个引导模式对话框。当用户试图离开他们在表格中编辑的当前行时，会弹出此对话框以确认他们是否可以丢失其更改。AngularJS Bootstrap模式丢失范围

Bootstrap模态的身体层次注入覆盖层，因为我的看法比那更深一点。因此，模态被覆盖层隐藏。如果我将模态注入到同一级别，我可以看到叠加层，但现在范围已经丢失。

是否有办法以某种方式绑定示波器或以其他方式注册到事件，以便我可以继续与控制器通信？

下面是我试过的代码笔：http://codepen.io/matthewrhoden1/pen/BzEBxQ其中你会发现我放弃的一点是试图将范围发送到模态。

记住的HTML是在这条线更高的水平被注入：

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

答

最后，我想，我可以附加到根范围内。范围丢失时，模态的内容不能动态显示。至少这样我仍然可以确认是/否。

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

AngularJS Bootstrap模式丢失范围

相关推荐