AngularJS combining the use of two custom directives with a common scope

Question

I have two different user directives, both have an isolated area. Is there a way to use both directives for the same element without getting:

Error: several directives [...] requesting an isolated scope ...

I thought that they would share the total volume by doing this, but it looks like it will not (since I get this error) ...

Thanks tom

Answer 1

OK, I pondered this problem using the same controller for both of my directives, allowing them to separate an area other than the parent area ...

I'm still interested in any suggestions on this.

Answer 2

The following is a brief description of how schema scope can be combined in a reference to the $ compile method.

The main points are that the selection areas are not separated and that the element can have no more than one area attached to it. If your directives use a child scope instead, it will be split between the two directives.

• no scope + no scope => Two directives that do not require their own scope will use their parent scope
• child region + without visibility => Both directives will share the same region with one child node
• child region + content region => Both directives will share the same region with one child node
• isolated scope + no visibility => the isolated directive will use its own created isolated scope. Another directive will use parent scope
• isolated scope + child = = Will not work! Only one object can be associated with one element. Therefore, these directives cannot be applied to the same element.
• isolated scope + isolated area => Will not work! Only one object can be associated with one element. Therefore, these directives cannot be applied to the same element.

Answer 3

Well, I think Angular gives you a choice between working with the parent scope and the relationship between directives.

You can achieve the latter by adding an interface to the "master" directive, by adding a controller function that the "subordinate" directive consumes. The slave explains the dependency via require: '^masterDirective' and can use its interface in the link function.

See the official explanation with a good example: https://docs.angularjs.org/guide/directive#creating-directives-that-communicate