Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong><a href="https://docs.angularjs.org/api/ng.$compile.directive.Attributes#$observe">$observe()</a></strong> is a method on the <a href="http://docs.angularjs.org/api/ng.$compile.directive.Attributes">Attributes</a> object, and as such, it can only be used to observe/watch the value change of a DOM attribute. It is only used/called inside directives. Use $observe when you need to observe/watch a DOM attribute that contains interpolation (i.e., {{}}'s). <br>E.g., <code>attr1="Name: {{name}}"</code>, then in a directive: <code>attrs.$observe('attr1', ...)</code>. <br>(If you try <code>scope.$watch(attrs.attr1, ...)</code> it won't work because of the {{}}s -- you'll get <code>undefined</code>.) Use $watch for everything else.</p> <p><strong><a href="http://docs.angularjs.org/api/ng.$rootScope.Scope#$watch">$watch()</a></strong> is more complicated. It can observe/watch an "expression", where the expression can be either a function or a string. If the expression is a string, it is <a href="http://docs.angularjs.org/api/ng.$parse">$parse</a>'d (i.e., evaluated as an <a href="http://docs.angularjs.org/guide/expression">Angular expression</a>) into a function. (It is this function that is called every digest cycle.) The string expression can not contain {{}}'s. $watch is a method on the <a href="http://docs.angularjs.org/api/ng.$rootScope.Scope">Scope</a> object, so it can be used/called wherever you have access to a scope object, hence in </p> <ul> <li>a controller -- any controller -- one created via ng-view, ng-controller, or a directive controller</li> <li>a linking function in a directive, since this has access to a scope as well</li> </ul> <p>Because strings are evaluated as Angular expressions, $watch is often used when you want to observe/watch a model/scope property. E.g., <code>attr1="myModel.some_prop"</code>, then in a controller or link function: <code>scope.$watch('myModel.some_prop', ...)</code> or <code>scope.$watch(attrs.attr1, ...)</code> (or <code>scope.$watch(attrs['attr1'], ...)</code>). <br>(If you try <code>attrs.$observe('attr1')</code> you'll get the string <code>myModel.some_prop</code>, which is probably not what you want.)</p> <p>As discussed in comments on @PrimosK's answer, all $observes and $watches are checked every <a href="http://docs.angularjs.org/guide/concepts">digest cycle</a>.</p> <p>Directives with isolate scopes are more complicated. If the '@' syntax is used, you can $observe <em>or $watch</em> a DOM attribute that contains interpolation (i.e., {{}}'s). (The reason it works with $watch is because the '@' syntax does the <a href="http://docs.angularjs.org/api/ng.$interpolate">interpolation</a> for us, hence $watch sees a string without {{}}'s.) To make it easier to remember which to use when, I suggest using $observe for this case also.</p> <p>To help test all of this, I wrote a <a href="http://plnkr.co/edit/HBha8sVdeCqhJtQghGxw?p=preview">Plunker</a> that defines two directives. One (<code>d1</code>) does not create a new scope, the other (<code>d2</code>) creates an isolate scope. Each directive has the same six attributes. Each attribute is both $observe'd and $watch'ed.</p> <pre><code>&lt;div d1 attr1="{{prop1}}-test" attr2="prop2" attr3="33" attr4="'a_string'" attr5="a_string" attr6="{{1+aNumber}}"&gt;&lt;/div&gt; </code></pre> <p>Look at the console log to see the differences between $observe and $watch in the linking function. Then click the link and see which $observes and $watches are triggered by the property changes made by the click handler.</p> <p>Notice that when the link function runs, any attributes that contain {{}}'s are not evaluated yet (so if you try to examine the attributes, you'll get <code>undefined</code>). The only way to see the interpolated values is to use $observe (or $watch if using an isolate scope with '@'). Therefore, getting the values of these attributes is an <em>asynchronous</em> operation. (And this is why we need the $observe and $watch functions.)</p> <p>Sometimes you don't need $observe or $watch. E.g., if your attribute contains a number or a boolean (not a string), just evaluate it once: <code>attr1="22"</code>, then in, say, your linking function: <code>var count = scope.$eval(attrs.attr1)</code>. If it is just a constant string &ndash; <code>attr1="my string"</code> &ndash; then just use <code>attrs.attr1</code> in your directive (no need for $eval()).</p> <p>See also <a href="https://groups.google.com/d/msg/angular/TbRQhG-G14I/bYcipV1OYwcJ">Vojta's google group post</a> about $watch expressions.</p>
    singulars
    1. This table or related slice is empty.
    1. POAngularJS : Difference between the $observe and $watch methods
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USRed15
    1. USMark Rajcok
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POAngularJS : Difference between the $observe and $watch methods
      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. COGreat explanation! +1
      singulars
      1. PO
      1. USPrimosK
    2. COThis is more helpful than the official Angular docs! Thanks!
      singulars
      1. PO
      1. USy_s
    3. COGreat answer! Do you have idea why `ng-src/ng-href` use `attr.$observe` instead of `scope.$watch` then?
      singulars
      1. PO
      1. USokm
 

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