AngularJS creating additional scopes on opening modal dialog multiple times

Question

I have a modal with angular-UI bootstrap. Because I've a dozen of different forms I want to show in the modal, I'm using a ng-include directive inside the modal. The src attribute is changing dynamically.

I saw the following behavior with batarang (even with a static src for ng-include):

Every time opening the modal, an additional scope is created! Because this modal will be opened and closed many times I will get dozens of new scopes and the application is getting very slow.

The index.html:

<body ng-controller="MainCtrl">
  <p><button class="btn" ng-click="showModal()">show Form</button></p>

  <div class="modal" modal="theModal" close="closeModal()">
    <div ng-include src="'form1.html'"></div>
  </div>
</body>

The app.js is quite primitiv:

app.controller('MainCtrl', function($scope) {
  $scope.showModal = function() { 
    $scope.theModal = true; 
  };

  $scope.closeModal =function(){
    $scope.theModal = false;
  };  
});

Here is the plnkr run or plnkr edit

kwrl
– kwrl

2013-05-16 11:17:22 +00:00
Commented May 16, 2013 at 11:17 — kwrl
– kwrl, Commented May 16, 2013 at 11:17

kwrl · Accepted Answer · 2013-05-16 11:08:35Z

1

This seems to be a bug in angular UI: https://github.com/angular-ui/bootstrap/pull/232

answered May 16, 2013 at 11:08

kwrl

6538 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS creating additional scopes on opening modal dialog multiple times

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related