AngularJS Bootstrapモーダル損失スコープ

Question

ブートストラップモーダルダイアログを含むngRouteによって読み込まれたテンプレートがあります。ユーザーが現在編集中の行をテーブルに残そうとすると、このダイアログが表示され、変更が失われても問題ないかどうかが確認されます。

ブートストラップ・モードは、ボディ・レベルでオーバーレイを注入します。私の視点はそれより少し深いです。したがって、モーダルはオーバーレイによって隠されます。モーダルを同じレベルに注入すると、オーバーレイが見えますが、スコープが失われます。

スコープをバインドする方法や、イベントに登録する別の方法があるので、コントローラとの通信を継続できますか？

私が試みたコードは次のとおりです。http://codepen.io/matthewrhoden1/pen/BzEBxQこれで、私が諦めた部分が、スコープをモーダルに送信しようとしていることがわかります。

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

Answer 1

は最終的に私はルートスコープに接続できることを考え出し：

は、HTMLはこのラインでより高いレベルで注入されている点に注意してください。モダールの内容は、スコープが失われると動的になることはできません。少なくともこのように私はまだyes/noを確認できます。

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