Passing params to nested directives with isolated scope

Question

I have an object data in the MainCtrl. This object is used to pass data to directives first-directive and second-directive. Two-data binding is neccesary in both cases.

For first-directive, I pass the complete object data but for second-directive I want to pass numbers object (scope.numbers = scope.dataFirst.numbers).

The problem:

When I do <div second-directive="dataFirst.numbers"></div>, and I check if dataSecond is an object, it returns true.

But when I do <div second-directive="numbers"></div> and I check if dataSecond is an object, it returns false.

In both cases if I do console.log(scope) the scope.dataSecond property is shown.

The question:

Why does this occur and what's the correct way to pass params to directives?

EDIT: The idea is making reusable directives and this implies that they can't depend on others directives.

Answer 1

I'll repeat what others before me said - that the link function of firstDirective is a post-link function that runs after the link function of secondDirective, and so scope.numbers is not yet assigned the object scope.dataFirst.numbers.

However, a solution that tightly couples two directives via require seems sub-optimal to me.

Instead, to make sure that a scope property is properly assigned in the parent before inner/child directives run (like secondDirective, in this case) is to use a pre-link function in the firstDirective (instead of a post-link)

link: {
  pre: function prelink(scope){
      console.log('first directive')
      console.log(scope)
      scope.numbers = scope.dataFirst.numbers;
    }
}

Demo