AngularJS Bootstrap Modal Losing Scope

Question

I have a template loaded by ngRoute that contains a bootstrap modal dialog. When the user tries to leave the current row they're editing in a table, this dialog pops up to confirm if they're ok with losing their changes.

Bootstrap modal's inject an overlay at the body level, where as my view is a little deeper than that. Therefore the modal is hidden by the overlay. If I inject the modal to the same level I can see the overlay but now the scope is lost.

Is there a way to bind the scope somehow or another way to register to events so I can continue to communicate with the controller?

Here's the code pen I attempted: http://codepen.io/matthewrhoden1/pen/BzEBxQ in it you will find the point where I gave up is on trying to send the scope to the modal.

Keep in mind the html is being injected at a higher level with this line:

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

Matthew Rhoden · Accepted Answer · 2016-08-19 13:24:06Z

Eventually I figured that I can attach to the root scope. The modal's contents cannot be dynamic as the scope is lost. At least this way I can still confirm 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');

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

Collectives™ on Stack Overflow

AngularJS Bootstrap Modal Losing Scope

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related