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.

The directive I created works perfectly as long as it is not nested within another directive.

When nested, the 'localFunc: "&func"' attributes bind to outer controller scope just fine but 'localAttr: "=attr"' scope fail.

I would be ever so grateful is anyone can help me understand why.

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:

<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.