How to properly bind services with objects for which it is created?

Question

Angular

Again ... I redefined the directive and realized that now I want to add control (pause-play).
And now I consider this directive as part or even the main part of the video-bg-player component object.
And I also wanted to hang animation on the buttons and make them using angular itself and its animation (this is for now, and then maybe something stronger will have to be pulled). And it seems that such a trifle as animation broke everything.
If you go into the OOP dimension and set yourself the goal of making an easily supported and extensible application, then the first thing that comes to mind is initialization in one place and an injector. Further, you understand that "my mega player" is one big "MainVideoBgView", which places the player itself and its buttons in the right places, which it either creates itself, or is injected into it, or takes them from the asset manager. Now I'm starting to understand that the button is an object that I pass to the class that will animate it by calling the play method. How do I send it there? Well, there are only two ways, either injection from the place where I collect the entire application, or my main view, which can also be the place of initialization, passes the button object to the animation class when it is created.
It's simple, but with angular it's a bit more complicated. Here mainView is a directive, and the button is generally not an object that will be created by it, and even more so it (the button) cannot be injected.
You can create a service for animation and pass the $document service to it and look for what you need there yourself, but this is completely wrong. There is another option, that the directive will pass a link to the button to this service, but although this is correct, it looks wretched and ugly. It is ugly in terms of the fact that the service stands and waits until the button is transferred to it, and then several more services need to be written that will check whether this button exists or not. You can not check, but it would be wrong.
But there is a way when the directive will play the role of a real MainView and will transfer not to the service, but already to the usual class when it is created in its womb, the button received from its osprey, and not climbing and looking for strangers.
But how is it from the point of view of angular, because you have to transfer not only the button, but also $animate and so on?
Or I can't adapt to angular and is there another way? How would you do the same?

Answer 1

cannot be injected.

you can use ng-transclude to help you.
this goes against the idea of ​​directives. You should not make selections of elements outside the template of your directive at all, angular itself will find and connect everything for you, through directive controllers if you have dependencies.
In an ideal world, your directive would be something like this:

<x-video-bg-container type="youtube" video-id="{{my.videoID}}">
    <h1>Headline</h1>
    <x-video-bg-controls></x-video-bg-controls>
</x-video-bg-container>

Next, the magic of ng-transclude and communication through the directive controller, which allows us to implement our own controls, etc. You can also implement delegates for a directive through services or through directive callbacks.... As an example, you can see how it is implemented in ionic framework (UI framework for mobile applications in angular)