Изолированные рамок с простым angularjs вложенной директивы

Question

Please check this plnkr

Я прочитал everyhting можно найти о директивах, сферах применения и изолированных областях. Но я все еще не могу понять, как это сделать.

Директива, которую я создал, работает отлично, если она не вложена в другую директиву.

Вложенные атрибуты «localFunc:» & func «» привязываются к области внешнего контроллера просто отлично, но сбой «localAttr:» = attr »«.

Я был бы так благодарен, что кто-нибудь может помочь мне понять, почему.

Answer 1

Графический, вот что ваши телескопы выглядеть как раньше мы вводим в любое текстовое поле:

Обратите внимание, что изолирования Scope 006 родительские является сферой, которая включена через создается в соответствии с директивой container. Таким образом, searchText в области 006 будет привязывать данные к области 005 (а не к области 003), поскольку используется примитив.

Если мы вводим 11 в первое текстовое поле и 22 во второе текстовое поле и снова исследовать области действия, мы можем увидеть, где привязка данных имели место:

searchforThis2 желтого цвета в объеме 005 чтобы указать, что было создано новое свойство. Это произошло из-за того, что используется примитив - область 005 не использует здесь прототипальное наследование, она просто создает новое свойство примитива для себя (т. Е. Оно не выглядит в области 003 для имени свойства). Другие желтые предметы показывают, что примитивные значения изменились.

Как вы уже обнаружили, решение этой «лучшей практики» связано с привязкой к свойствам объекта (а не примитивам) в родительской области (то есть области 003).

Использование следующих в контроллере:

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

и в вашем HTML:

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

Объемы теперь выглядят так:

Если мы вводим 11 в первый текстовый блок и 22 во второе текстовое поле и снова просмотрите области, мы можем видеть, где t он Databinding состоялся:

Поскольку сфера 006 является изолят сфера, она использует его $parent, чтобы добраться до объема 005 (как выше). Оттуда, однако, прототипное наследование находится в игре, поскольку мы не используем примитивы. свойство объекта searchforThis2 находится в рамках 003.

Answer 2

Никогда не сработает. Часы googling ничего не показывают, пока я на самом деле не набираю вопрос, тогда я получаю комбинацию поисковых ключевых слов и вуаля! появляется ответ.

Благодаря this very illuminating post Я узнал, что моя проблема настолько распространена, что решение даже имеет имя - «Правило точки».

В основном вам нужно обратиться к унаследованному объекту на контроллере, а не к свойству, и проблема исчезнет.