In my TypeScript AngularJS application, I have a child directive that is dynamically generated. The template and controller are assigned at runtime based on the requirements of the situation, with multiple directives within the template. To display multiple directives on the page, I use an isolated scope for each one. There is also a parent directive responsible for managing which child directives should be displayed.
When adding a new child directive, I create its template in the parent directive, select the element to append it to, and use:
var compiledDirective = this.$compile(myTemplate)(scope.$new(true, scope));
angular.element(".parent").append(compiledDirective);
_.defer(() => {
scope.$apply();
});
Adding and removing children works correctly. However, after a child directive is destroyed by the parent directive, issues arise when trying to add more children. Scopes are not updating properly, leading to unusable directives.
A strange behavior occurs where destroying the isolated scope causes future uses of the directive to break, but leaving it intact results in functional directives with a memory leak. Is there an alternative method to clear these scopes without using $destroy?
Edit: Investigation revealed that subsequent directives have their isolated scopes incorrectly bound to the parent scope, causing the parent scope to be destroyed along with the child scopes. Properly binding the isolated scopes to the directives when adding them to the DOM should resolve this issue.