Ответ 1
Ваши скрипты создают три области:
- область, связанная с контроллером
Ctrl, из-заng-controller - директива transcluded scope, из-за
transclude: true - директива изолирует область видимости, из-за
scope: { ... }
В fiddle1, прежде чем вводить что-либо в текстовое поле, мы имеем следующее:
Область 003 - область, связанная с контроллером. Поскольку мы еще не вводили текст в текстовое поле, нет свойства data. В области выделения 004 мы видим, что было создано свойство title, но оно пустое. Он пуст, поскольку родительская область еще не имеет свойства data.title.
После ввода my title в текстовое поле, мы теперь имеем:
Область контроллера 003 теперь имеет новое свойство объекта data (поэтому оно окрашено в желтый цвет), у которого свойство title теперь установлено на my title. Поскольку свойство scope изоляции title является однонаправленной привязкой к интерполированному значению data.title, оно также получает значение my title (значение цветно желтое, потому что оно изменилось).
Заданная область прототипа наследуется из области действия контроллера, поэтому внутри заключенного HTML angular может следовать цепочке прототипов и находить $scope.data.title в родительской области (но $scope.title там не существует).
Область выделения имеет доступ только к своим собственным свойствам, поэтому только свойство title.
В fiddle2 перед вводом мы имеем ту же картинку, что и в скрипке.
После ввода my title:
Обратите внимание, где появилось новое свойство data.title - на закрытой области. Область выделения по-прежнему ищет data.title в области контроллера, но ее не существует на этот раз, поэтому ее значение свойства title остается пустым.
В fiddle3 перед вводом мы имеем то же изображение, что и в fiddle1.
После ввода my title:
Обратите внимание, где появилось новое свойство data.title - в области изоляции. Ни одна из других областей не имеет доступа к области изоляции, поэтому строка my title больше не будет отображаться.
Обновление для angular v1.2:
С изменением eed299a angular теперь очищает точку перехода перед тем, как перекрыть, поэтому части Template title: ... и Template data.title: ... t, если вы не измените шаблон таким образом, чтобы ng-transclude был сам по себе, например:
'<h3>Template title: <span style="color:red">{{title}}</span></h3>' +
'<h3>Template data.title: <span style="color:red">{{data.title}}</span></h3>' +
'<div ng-transclude></div>'
В приведенном ниже обновлении для angular v1.3 это изменение шаблона было сделано.
Обновление для angular v1.3 +:
Поскольку angular v1.3, transcluded scope теперь является дочерним элементом области выделения директивы, а не дочерним элементом области контроллера. Итак, в скрипке1, прежде чем мы набираем что-нибудь:
Изображения в этом обновлении рисуются с помощью инструмента Peri $scope, поэтому изображения немного отличаются. @ указывает, что у нас есть свойство scope изоляции, которое использует синтаксис @, а розовый фон означает, что инструмент не смог найти ссылку на предка для сопоставления (что верно, поскольку мы ничего не вводили в в текстовое поле еще).
После ввода my title в текстовое поле, мы теперь имеем:
Изолировать свойства, которые используют привязку @, всегда будет показывать результат интерполированной строки в области выделения после символа @. Peri $scope также смог найти это точное строковое значение в области предков, поэтому он также показывает ссылку на это свойство.
В скрипте 2 перед вводом мы имеем ту же картинку, что и в скрипке.
После ввода my title:
Обратите внимание, где появилось новое свойство data.title - на закрытой области. Область выделения по-прежнему ищет data.title в области контроллера, но ее не существует на этот раз, поэтому ее значение свойства title остается пустым.
В fiddle3 перед вводом мы имеем то же изображение, что и в fiddle1.
После ввода my title:
Обратите внимание, где появилось новое свойство data.title - в области изоляции. Несмотря на то, что транскодированная область доступа имеет доступ к области изоляции через отношение $parent, она не будет выглядеть там для title или data.title - она будет выглядеть только в области контроллера (т.е. Она будет следовать за прототипом наследование), а область управления не имеет указанных свойств.
