Menu
Is there any way to add an element that is an Angular directive with jQuery methods like append() and have Angular do its compilation/linking to make it work as though you'd included the directive in the first place?
Example:
app.directive('myAngularDirective', [function () { ... // Lots of stuff in here; works when used normally but not when added via jQuery }); $("body").append("<my-angular-directive />"); It currently just appends an empty DOM element called "my-angular-directive," but Angular doesn't kick in and do its magic.
871
If DOM elements created by Angular, views will be created by default. If we use Jquery or JavaScript to change the DOM structure directly, then no views will be updated. Angular doesn't know that the DOM element is created. So change detection not works for that DOM element.
Angular 8 directives are DOM elements to interact with your application. Generally, directive is a TypeScript function. When this function executes Angular compiler checked it inside DOM element.
When it comes to do DOM manipulation, binding event, etc... It happens, that we define functions that manipulates the DOM in a custom directive's link function, but we call it from the controller (we define functions in the $scope so it can be accessible by the given controller).
The right way to go is to use: $compile and in case your directive returns: directive definition object (which is btw. the recommended way to go) you can then call link function on it (to inject scope, for example).
$('body').append($compile("<my-angular-directive />")(scope)); scope.$apply(); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
