Your fiddles create three scopes:
- a scope associated with controller
Ctrl, because ofng-controller - a directive transcluded scope, because of
transclude: true - a directive isolate scope, because of
scope: { ... }
In fiddle1, before we type anything into the text box we have the following:
Scope 003 is the scope associated with the controller. Since we didn’t type into the textbox yet, there is no data property. In isolate scope 004, we see that a title property was created, but it is empty. It is empty because the parent scope doesn’t have a data.title property yet.
After typing my title into the textbox, we now have:
Controller scope 003 now has a new data object property (which is why it is colored yellow), which has a title property now set to my title. Since isolate scope property title is one-way databound to the interpolated value of data.title, it also gets the value my title (the value is colored yellow because it changed).
The transcluded scope prototypically inherits from the controller scope, so inside the transcluded HTML, angular can follow the prototype chain and find $scope.data.title in the parent scope (but $scope.title doesn’t exist there).
The isolate scope only has access to its own properties, hence only property title.
In fiddle2, before typing we have the same picture as in fiddle1.
After typing my title:
Notice where the new data.title property showed up — on the transcluded scope. The isolate scope is still looking for data.title on the controller scope, but its not there this time, so its title property value remains empty.
In fiddle3, before typing we have the same picture as in fiddle1.
After typing my title:
Notice where the new data.title property showed up — on the isolate scope. None of the other scopes have access to the isolate scope, so the string my title won’t appear anywhere else.
Update for Angular v1.2:
With change eed299a Angular now clears the transclusion point before transcluding, so the Template title: ... and Template data.title: ... parts won’t show up unless you modify the template such that ng-transclude is by itself, such as:
'<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>'
In the update below for Angular v1.3, this template change was made.
Update for Angular v1.3+:
Since Angular v1.3, the transcluded scope is now a child of the directive’s isolate scope, rather than a child of the controller scope. So in fiddle1, before we type anything:
The pictures in this update are drawn with the Peri$scope tool, so the pictures are a bit different. The @ indicates we have an isolate scope property that uses the @ syntax, and the pink background means that the tool was unable to find an ancestor reference for the mapping (which is true, since we didn’t type anything in to the textbox yet).
After typing my title into the textbox, we now have:
Isolate properties that use @ binding will always show the interpolated string result in the isolate scope after the @ symbol. Peri$scope was also able to find this exact string value in an ancestor scope, so it also shows a reference to that property.
In fiddle 2, before typing we have the same picture as in fiddle1.
After typing my title:
Notice where the new data.title property showed up — on the transcluded scope. The isolate scope is still looking for data.title on the controller scope, but its not there this time, so its title property value remains empty.
In fiddle3, before typing we have the same picture as in fiddle1.
After typing my title:
Notice where the new data.title property showed up — on the isolate scope. Even though the transcluded scope has access to the isolate scope via the $parent relationship, it won’t look there for title or data.title — it will only look in the controller scope (i.e., it will follow the prototypal inheritance), and the controller scope doesn’t have these properties defined.