Angular.js: How to bind scopes of a directive that is inside another directive

Question

Angular

When we create a directive (restrict: 'E'), inside it another one (also restrict: 'E'), then equivalent scopes are created for them, which are at the same level (which, in principle, is logical, because no one forces us to use them exactly in this form, being nested in each other). My task is just to get access to the parent directive from the nested directive.
How would you achieve this goal?

Answer 1

if you have two independent directives, they should be independent. No need to even try to make a connection through ospreys / events, etc.
If you need a nested directive to have access to the parent directive. then use the link through the controller of the parent directive (read about the require option when defining a directive). For example:

angular.module('foo', [])

.directive('foo', function () {
    return {
        restrict: 'E',
        controller: function ($scope) {
               this.$childs = [];
               this.appendChild = function (child) {
                     this.$childs.push(child);
               }
        }
    }
})

.directive('bar', function () {
    return {
         restrict: 'E',
         requires: '^foo', // говорит о том что директива должна быть вложена в другую
         link: function (scope, el, attr, ctrl) {
               ctrl.appendChild(el);
         }
    }
});