Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I guess you can roughly sum up what a directive is as "something that encapsulates a bunch of functionality into a widget that can be dropped into any page anywhere", but there's more to it than that. A directive is a way to extend HTML by creating new tags, allowing you to write more expressive markup. For instance, instead of writing a <code>&lt;div&gt;</code> and a bunch of <code>&lt;li&gt;</code> tags in order to create a rating control, you could wrap it up with a new <code>&lt;rating&gt;</code> tag. Or, instead of lots of <code>&lt;div&gt;</code>s, and <code>&lt;span&gt;</code>s and whatnot to create a tabbed interface, you could implement a pair of directives, say, <code>&lt;tab&gt;</code> and <code>&lt;tab-page&gt;</code>, and use them like this:</p> <pre><code>&lt;tab&gt; &lt;tab-page title="Tab 1"&gt; tab content goes here &lt;/tab-page&gt; &lt;tab-page title="Tab 2"&gt; tab content goes here &lt;/tab-page&gt; &lt;/tab&gt; </code></pre> <p>That's the truly power of directives, to enhance HTML. And that doesn't mean that you should only create "generic" directives; you can and should make components specific to your application. So, back to your question, you could implement a <code>&lt;loggedinuser&gt;</code> tag to display the name of the logged user without requiring a controller to provide it with the information. But you definitely shouldn't rely on a global variable for that. The Angular way to do it would be make use of a service to store that information, and inject it into the directive:</p> <pre><code>app.controller('MainCtrl', function($scope, userInfo) { $scope.logIn = function() { userInfo.logIn('Walter White'); }; $scope.logOut = function() { userInfo.logOut(); }; }); app.service('userInfo', function() { this.username = '' this.logIn = function(username) { this.username = username; }; this.logOut = function() { this.username = ''; }; }); app.directive('loggedinUser', function(userInfo) { return { restrict: 'E', scope: true, template: '&lt;h1&gt;{{ userInfo.username }}&lt;/h1&gt;', controller: function($scope) { $scope.userInfo = userInfo; } }; }); </code></pre> <p>Plunker <a href="http://plnkr.co/edit/yslizIzzaYM9Tsp8xX6Z?p=preview" rel="nofollow">here</a>.</p> <p>The <a href="http://docs.angularjs.org/guide/directive" rel="nofollow">Angular dev guide on directives</a> is a must-go place if you want to start creating powerful, reusable directives.</p>
    singulars
    1. This table or related slice is empty.
    1. POUnderstanding the 'directive' paradigm in Angularjs
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USMichael Benford
    1. USMichael Benford
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POUnderstanding the 'directive' paradigm in Angularjs
      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. VTAcceptedByOriginator
    1. COThis is a great answer and very much what I was looking for. Thanks! A follow-up question I have is: let's say something happens on the view where this directive is placed - perhaps the user clicks on something that causes a log out - and I want the directive to update and display new text. But, no navigation is happening to another view, which I presume means the controller function on the directive will not be rerun, so I need the directive to react to an event somehow. How could I set this up?
      singulars
      1. PO
      1. USKevin MacDonald
    2. CONo problem, man. Glad I could help. :) The directive's controller won't run again, but the interpolation added to the directive's template - the `{{ user.name }}` part - will be re-evaluated and its value will be updated. To understand it better, take a look [here](http://docs.angularjs.org/guide/scope). I'll updated my answer to illustrate that.
      singulars
      1. PO
      1. USMichael Benford
    3. COJust to be clear, suppose my loggedinuser directive is placed in my index.html file so that it appears in the header above every view. Initially, there is no logged in user to show, so it will hide itself. But, upon navigating to my login view and doing a login via a web service, I want that directive to update (and show) itself with the name of my user. Since the controller of the directive is only run once, what is the mechanism that allows the scope of the directive to be updated? I believe that is the piece I am missing.
      singulars
      1. PO
      1. USKevin MacDonald
 

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