How to access a dynamically created element in angular?

Question

JavaScript

How to get an element with a directive that was created dynamically?

<div test ></div> // динамически создан


App.directive("test", function(){

........
 element. ....... // так не работает


})

Answer 1

Uh ... turn on the telepath mode.
Let's say you have the following code:

angular.module('app', [])

.directive('foo', function () {
    return function (scope, el, attr) {
        el.append('<div bar></div>');
    }
}
.directive('bar', function () {
    return function (scope, el, attr) {
        console.log('init bar directive');
    }  
});

there is a pattern

<div ng-app="app">
    <div foo></div>
</div>

And when the application is launched, we do not see our log console in the console and get upset.
And why? but because angular does not track the appearance / removal of new elements by itself, and does not try to look for directives for every sneeze. To do this, he must be asked to collect the directive.

angular.directive('foo', function ($compile) {
    return function (scope, el, attr) {
        var child = $compile('<div bar></div>')(scope);
        el.append(child);
    }
});

If you need to do this when initializing the directive, it’s easier to put the directives in the template and then angular will do everything itself, since it will do $ compile inside anyway.
Read more here: https://docs.angularjs.org/api/ng/service/$compile