Databases
StackOverflow2013
Postsdbo
POConfused about Angularjs transcluded and isolate scopes & bindings
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POConfused about Angularjs transcluded and isolate scopes & bindings
    primarykey
    data
    text
    <p>I am struggling to understand the scope of models and their bindings in respect of directives which have limited scope. </p> <p>I get that restricting the scope on a directive means that controller.$scope and directive.scope are no longer the same thing. However, I am confused about how the placing of models either within the directive template or in the html affects data binding. I feel I'm missing something very fundamental and to move on I need to understand this.</p> <p>Take the following code (fiddle here: <a href="http://jsfiddle.net/2ams6/" rel="noreferrer">http://jsfiddle.net/2ams6/</a>)</p> <p>JavaScript</p> <pre><code>var app = angular.module('app',[]); app.controller('Ctrl',function($scope){ }); app.directive('testel', function(){ return { restrict: 'E', scope: { title: '@' }, transclude: true, template: '&lt;div ng-transclude&gt;'+ '&lt;h3&gt;Template title: {{title}}&lt;/h3&gt;' + '&lt;h3&gt;Template data.title:{{data.title}}&lt;/h3&gt;' + '&lt;/div&gt;' } }); </code></pre> <p>HTML</p> <pre><code>&lt;div ng-app='app'&gt; &lt;div ng-controller="Ctrl"&gt; &lt;input ng-model="data.title"&gt; &lt;testel title="{{data.title}}"&gt; &lt;h3&gt;Transclude title:{{title}}&lt;/span&gt;&lt;/h3&gt; &lt;h3&gt;Transclude data.title:{{data.title}}&lt;/h3&gt; &lt;/testel&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The model only updates <code>{{title}}</code> within the template, and <code>{{data.title}}</code> in the transclusion. <strong>Why not <code>{{title}}</code> in the transclusion nor <code>{{data.title}}</code> in the template?</strong></p> <p>Moving the input to within the transclusion like so (fiddle here: <a href="http://jsfiddle.net/eV8q8/1/" rel="noreferrer">http://jsfiddle.net/eV8q8/1/</a>):</p> <pre><code>&lt;div ng-controller="Ctrl"&gt; &lt;testel title="{{data.title}}"&gt; &lt;input ng-model="data.title"&gt; &lt;h3&gt;Transclude title: &lt;span style="color:red"&gt;{{title}}&lt;/span&gt;&lt;/h3&gt; &lt;h3&gt;Transclude data.title: &lt;span style="color:red"&gt;{{data.title}}&lt;/span&gt;&lt;/h3&gt; &lt;/testel&gt; &lt;/div&gt; </code></pre> <p>now means only transclude <code>{{data:title}}</code> gets updated. <strong>Why not either template <code>{{title}}</code> or <code>{{data.title}}</code>, nor transclude <code>{{title}}</code>?</strong></p> <p>And finally, moving the input to within the template, like so (fiddle here: <a href="http://jsfiddle.net/4ngmf/2/" rel="noreferrer">http://jsfiddle.net/4ngmf/2/</a>):</p> <pre><code>template: '&lt;div ng-transclude&gt;' + '&lt;input ng-model="data.title" /&gt;' + '&lt;h3&gt;Template title: {{title}}&lt;/h3&gt;' + '&lt;h3&gt;Template data.title: {{data.title}}&lt;/h3&gt;' + '&lt;/div&gt;' </code></pre> <p>Now means that only template <code>{{data.title}}</code> gets updated. <strong>Again, why not the other 3 bindings?</strong></p> <p>I hope there is something obvious staring me in the face and I'm missing it. If you get me to get this, I'll buy you a beer, or give you some points, or some other such thing. Many thanks.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USdewd
    1. USdewd
    plurals
    1. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POConfused about Angularjs transcluded and isolate scopes & bindings
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POConfused about Angularjs transcluded and isolate scopes & bindings
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POConfused about Angularjs transcluded and isolate scopes & bindings
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThis is a big topic and I unfortunately don't have time to give too much detail before heading to work, but read Mark Rajcok's [Scope/Prototypal Inheritance Guide](http://stackoverflow.com/a/14049482/62082). There are lots of diagrams, which helps, and he covers transclusion.
      singulars
      1. POConfused about Angularjs transcluded and isolate scopes & bindings
      1. USMichelle Tilley
    2. CO@BrandonTilley Amazing article. many, many thanks for posting it. Just working my way through it. Be able to spend more time on it Tuesday.
      singulars
      1. POConfused about Angularjs transcluded and isolate scopes & bindings
      1. USdewd
 

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.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload