CODEWITHSUNDEEP
angularjsangularjs-directive
callmekatootie
callmekatootie

Reputation: 11228

Directive scope results in orphaned scope

I am using AngularJS with Angular UI Bootstrap - Angular UI Bootstrap version is an old one (0.4.0).

I am making using of the Modal directive. Within the modal body, I have my own directive which displays a form.

This form directive has a controller function that submits the form to the server.

The modal has a button which calls a controller function (different controller) that broadcasts and event. The Form controller has an even listener that, when the event is raised, submits the form.

So, summarizing, form controller has a simple function to submit form:

$scope.submitForm = function () {
    //Submit the form to the server
};

Form controller also has an event handler

$scope.$on('submitEvent', function () {
    $scope.submitForm();
});

The modal is part of another controller that raises the event:

$scope.$broadcast('submitForm');

Now comes the issue.

Each time the modal is opened, I find that a new scope is created (as expected since I have an isolate scope for the directive). However, once the modal is closed, the scope does not seem to be destroyed.

Each time the modal is opened, a new scope is created. But the previous scope remains. It basically exists as an orphan scope - it does not affect the new scope of the new modal.

The problem arises when the modal controller raises the submitForm event. When the event is raised, all the event listeners are fired. As a result, even the event listeners on the orphan scope fires submitting an empty form multiple times (as many times as the modal was opened) and finally the event listener of the last active scope fires which submits the actual form.

Thus, I seem to have scopes that are not bound to any template but seem to eat into memory with usage of the application.

My problem is not calling the submitForm function correctly - I only wish to know how to deal with the orphan scopes...

Upvotes: 0

Views: 266

Answers (1)

IvanZh
IvanZh

Reputation: 2290

Such problem with orphan scopes also exist in 0.10 version and should be fixed in the next release.

As for orphan scopes, you can remove them manually by $scope.$destroy() inside modal controller. After that all modal scope listeners will be inactive. Removal also implies that the current scope is eligible for garbage collection.

Upvotes: 2

Related Questions