StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
16705183
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
4
CommunityOwnedDate
CreationDate
2013-05-23T03:28:21.750
FavoriteCount
0
LastActivityDate
2015-03-31T03:34:02.017
LastEditDate
2015-03-31T03:34:02.017
LastEditorUserId
215945
OwnerUserId
215945
ParentId
16653004
PostTypeId
2
Score
113
ViewCount
0
LastEditorDisplayName
text
Body
Your fiddles create three scopes: <ol> <li>a scope associated with controller <code>Ctrl</code>, because of <code>ng-controller</code></li> <li>a directive transcluded scope, because of <code>transclude: true</code></li> <li>a directive isolate scope, because of <code>scope: { ... }</code></li> </ol> In fiddle1, before we type anything into the text box we have the following: <img src="https://i.stack.imgur.com/GeL6b.png" alt="enter image description here"> Scope 003 is the scope associated with the controller. Since we didn't type into the textbox yet, there is no <code>data</code> property. In isolate scope 004, we see that a <code>title</code> property was created, but it is empty. It is empty because the parent scope doesn't have a <code>data.title</code> property yet. After typing <code>my title</code> into the textbox, we now have: <img src="https://i.stack.imgur.com/kwtt2.png" alt="enter image description here"> Controller scope 003 now has a new <code>data</code> object property (which is why it is colored yellow), which has a <code>title</code> property now set to <code>my title</code>. Since isolate scope property <code>title</code> is one-way databound to the interpolated value of <code>data.title</code>, it also gets the value <code>my title</code> (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 <code>$scope.data.title</code> in the parent scope (but <code>$scope.title</code> doesn't exist there). The isolate scope only has access to its own properties, hence only property <code>title</code>. In fiddle2, before typing we have the same picture as in fiddle1. After typing <code>my title</code>: <img src="https://i.stack.imgur.com/OGpJd.png" alt="enter image description here"> Notice where the new <code>data.title</code> property showed up -- on the transcluded scope. The isolate scope is still looking for <code>data.title</code> on the controller scope, but its not there this time, so its <code>title</code> property value remains empty. In fiddle3, before typing we have the same picture as in fiddle1. After typing <code>my title</code>: <img src="https://i.stack.imgur.com/00SS0.png" alt="enter image description here"> Notice where the new <code>data.title</code> property showed up -- on the isolate scope. None of the other scopes have access to the isolate scope, so the string <code>my title</code> won't appear anywhere else. <hr> Update for Angular v1.2: With change <a href="https://github.com/angular/angular.js/commit/eed299a31b5a6dd0363133c5f9271bf33d090c94" rel="noreferrer">eed299a</a> Angular now clears the transclusion point before transcluding, so the <code>Template title: ...</code> and <code>Template data.title: ...</code> parts won't show up unless you modify the template such that <code>ng-transclude</code> is by itself, such as: <pre><code>'<h3>Template title: {{title}}</h3>' + '<h3>Template data.title: {{data.title}}</h3>' + '<div ng-transclude></div>' </code></pre> In the update below for Angular v1.3, this template change was made. <hr> 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: <img src="https://i.stack.imgur.com/hwgjb.png" alt="enter image description here"> The pictures in this update are drawn with the <a href="https://github.com/mrajcok/angularjs-periscope" rel="noreferrer">Peri$scope</a> tool, so the pictures are a bit different. The <code>@</code> indicates we have an isolate scope property that uses the <code>@</code> 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 <code>my title</code> into the textbox, we now have: <img src="https://i.stack.imgur.com/vkXNP.png" alt="enter image description here"> Isolate properties that use <code>@</code> binding will always show the interpolated string result in the isolate scope after the <code>@</code> 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 <code>my title</code>: <img src="https://i.stack.imgur.com/gxRrx.png" alt="enter image description here"> Notice where the new <code>data.title</code> property showed up -- on the transcluded scope. The isolate scope is still looking for <code>data.title</code> on the controller scope, but its not there this time, so its <code>title</code> property value remains empty. In fiddle3, before typing we have the same picture as in fiddle1. After typing <code>my title</code>: <img src="https://i.stack.imgur.com/dpHZC.png" alt="enter image description here"> Notice where the new <code>data.title</code> property showed up -- on the isolate scope. Even though the transcluded scope has access to the isolate scope via the <code>$parent</code> relationship, it won't look there for <code>title</code> or <code>data.title</code> -- 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.
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POConfused about Angularjs transcluded and isolate scopes & bindings
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USMark Rajcok
UserOwnerUserId
1. USMark Rajcok
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. POConfused about Angularjs transcluded and isolate scopes & bindings
 singulars
 PostTypePostTypeId
 PTQuestion
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTAcceptedByOriginator
3. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.