Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Well, on the surface this might seem like a neat idea... but in reality I'm not sure it's a good idea. </p> <h2>Method 1. The Fancy Directive that is probably a bad idea</h2> <p>In order to do this, you'll need to create a new Scope and $compile it into the transcluded view. In other words, you take the guts of the element your directive is on, you clone it, you create a new child Scope, you update it to have the values from the property you specify, then you bind that new child scope to the cloned elements which are then appended to your element. You also then assign original property to be the newly created scope. Clear as mud? Heh.</p> <p><strong>EDIT: I've eliminated the two-way binding problem</strong></p> <p><strong>EDIT: ...and simplified it a lot</strong></p> <p>It's still a little crazy though, because now your original $scope.property becomes a scope of it's own. But it works.</p> <p>Anyhow, <a href="http://plnkr.co/edit/mnYzef4dRB9OUQsLHerm?p=preview" rel="nofollow">here's a plunk of how you could do i</a>t, and some code... <strong>I don't recommend using this or even trying it though</strong>.</p> <pre class="lang-js prettyprint-override"><code>app.directive('notSureWhyYoudWantThis', function($parse) { return { scope: true, link: function(scope, elem, attrs) { // get the property getter/setter var property = $parse(attrs.notSureWhyYoudWantThis); // get the value from the scope (inherited from parent) var base = property(scope); // extend the child scope with whatever is in the base property. angular.extend(scope, base); // now set the property on the parent scope to be the child scope, // so it updates both ways. property.assign(scope.$parent, scope); } } }); </code></pre> <pre class="lang-html prettyprint-override"><code>&lt;div not-sure-why-youd-want-this="YPOBatch.YarnPOBatch.YarnType"&gt; &lt;div&gt; &lt;span&gt;Description:&lt;/span&gt;&lt;span&gt;{{YarnTypeDesc}}&lt;/span&gt; &lt;/div&gt; &lt;div&gt; &lt;span&gt;ID:&lt;/span&gt;&lt;span&gt;{{YarnTypeYarnTypeID}}&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <hr> <h1>Method 2. Best Idea: Scrub your data into a proper model, Mr. MVC-Programmer-Guy!</h1> <p>So the best idea here is the least sexy, you take that ugly data you got from your data source (AJAX, LocalStorage, whatever) and you actually groom it into a model that best represents your view/display logic. Then you put that model in a property on the $scope. Then end.</p> <p>This is really what you're <em>supposed</em> to be doing in MVC, particularly if you're at all Domain Driven, but it's just not attractive for some people because of the extra work incurred, and sometimes there's a desire to be able to directly submit data front to back in a singular form.</p> <pre class="lang-js prettyprint-override"><code>var ypoBatch= myService.getSomeDataFromSomething(); $scope.yarnType = { id: ypoBatch.YarnPOBatch.YarnTypeYarnTypeID, description: ypoBatch.YarnPOBatch.YarnTypeDesc }; </code></pre> <p>then in your view:</p> <pre class="lang-html prettyprint-override"><code>&lt;div&gt; &lt;div&gt; &lt;span&gt;Description:&lt;/span&gt; &lt;span&gt;{{yarnType.description}}&lt;/span&gt; &lt;/div&gt; &lt;div&gt; &lt;span&gt;ID:&lt;/span&gt; &lt;span&gt;{{yarnType.id}}&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Boring: Yes.</p> <p>Better: Probably.</p> <p>How you do the above is going to be situational, obviously. But that's the idea. And now you have many ways to skin this cat. Good luck.</p>
    singulars
    1. This table or related slice is empty.
    1. POLooking for Angular Directive which enables model encapsulation
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USBen Lesh
    1. USBen Lesh
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POLooking for Angular Directive which enables model encapsulation
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThanks for the comprehensive answer. I've tried ng-init, but it does not seem to work. Could that be because the data arrives asynchronously after the page is loaded and angular has already bound the data?
      singulars
      1. PO
      1. USBoluc Papuccuoglu
    2. COBy the way, I agree that the third approach is the best way to go. But the model I receive from my datasource is already stripped down to the bones so that there are no properties which are not displayed in the view. Having said that, it is organized according to a rather deep hierarchical conception of the nature of "real world" data. In effect I would be flattening the property tree. I have some reservations about that which I will later try to address through an edit to the OP because I am running out of comment space.
      singulars
      1. PO
      1. USBoluc Papuccuoglu
    3. CO@BolucPapuccuoglu: About ng-init ... yes it's probably due to asynchronicity.
      singulars
      1. PO
      1. USBen Lesh
 

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