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

Never fails. Hours of googling turns up nothing until I actually type the question then I get the combination of search keywords and voila! the answer appears.

Thanks to this very illuminating post I learned that my problem is so common the solution even has a name - "The dot rule".

Basically you need to refer to an inherited object on the controller rather than a property and the problem goes away.

Answer 2

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:

<search searchtext="obj.searchforThis1"...>
...
<div container>
  <search searchtext="obj.searchforThis2"...>

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.