CODEWITHSUNDEEP
javascriptjqueryangularjstwitter-bootstrap
Matthew Rhoden
Matthew Rhoden

Reputation: 728

AngularJS Bootstrap Modal Losing Scope

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

Upvotes: 1

Views: 466

Answers (1)

Matthew Rhoden
Matthew Rhoden

Reputation: 728

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

Upvotes: 1

Related Questions