Isolated scope with simple angularjs nested directive

Question

Please check this plnkr

I have read everyhting can find about directives, scope and isolated scopes. But I still cannot understand the way to make this work.

Th

Answer 1

Pictorially, here is what your scopes look like before we type into either textbox:

Notice that isolate scope 006's parent is the transcluded scope that is created by directive container. As such, the searchText in scope 006 will be databound to scope 005 (rather than scope 003) because a primitive is being used.

If we type 11 into the first textbox, and 22 into the second textbox and examine the scopes again, we can see where the databinding took place:

searchforThis2 is colored yellow in scope 005 to indicate that a new property was created. This happened because a primitive is used -- scope 005 does not use prototypal inheritance here, it just creates a new primitive property on itself (i.e., it does not look in scope 003 for the property name). The other yellow items indicate that the primitive values changed.

As you already discovered, the "best practice" solution to this problem is to bind to object properties (rather than primitives) in the parent scope (i.e., scope 003).

Using the following in your controller:

$scope.obj = {searchforThis1: "Sample Text 1", searchforThis2: "Sample Text 2"};

and in your HTML:

...

  

The scopes now look like the following:

If we type 11 into the first textbox, and 22 into the second textbox and examine the scopes again, we can see where the databinding took place:

Because scope 006 is an isolate scope, it uses its $parent to get to scope 005 (like above). From there, however, prototypal inheritance is in play, since we are not using primitives. Object property searchforThis2 is located in scope 003.