Using $ scope. $ Destroy solves memory leak but violates directive

Question

I have a child directive that works pretty dynamically in a TypeScript AngularJS application. The template and controller are connected at runtime based on what it needs to do for the given situation, and the template itself contains a number of directives. I need to show several pointers on the page, so I use an isolated scope between them. I have another directive that is responsible for tracking which of these child directives should be on the page at any given time (called the parent directive).

If I need to add a new child, I create a template for it in this parent directive, identify the element to which I want to add it, and use:

var compiledDirective = this.$compile(myTemplate)(scope.$new(true, scope));
angular.element(".parent").append(compiledDirective);
_.defer(() => {
  scope.$apply();
});

If I download the application, this works fine, and I see that it creates every child that works as I expected. When I need to remove all / all of these children, this parent processes this also in the following function:

var destroyChild = (identifier: string) {
  this.$timeout(() => {
    var elem = angular.element(".parent").find(`li[ident='${identifier}']`);
    elem.scope().$destroy();
    elem.remove();
    _.defer(() => {
    });
  });
}

Now all the elements are cleaned as expected, and if I look at Batarang, I see that the directives disappear from the available areas. I have an event handler for the $ destroy event in the child directive, so I see a console message when the directive is destroyed and appears as expected after running this destruction function.

, . , , - , , , , (, , ng-hide ), , , .

, , , , , , , , , :

elem.scope().$destroy();

Batarang, DOM , , , , , , ( , ).

, , $, , , , , ? $destroy?

Edit: , , , Batarang, angular.element('lookup-their-individual-idents'). scope() , , , , , . , (, , ), .

, , , , DOM, .

Answer 1

, , Batarang, . , , , , , , , .

, , , , , , , , :

var child = this.templateGenerator.addChild(applicableData);
var compiledChild = this.$compile(child)(scope.$new(true));
element.append(compiledChild);

, , . , , , , .