Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>To answer your question about dom logic in an angular service. No, it is not a good idea, and if you really think about it, there is no need for that. What do you need: </p> <ul> <li>a modal that can close/open</li> <li>can execute callbacks based on whether you clicked yes or cancel</li> </ul> <p>For that simple functionality you most certainly don't need any dom logic and especially not any dom logic in your services.</p> <p>You can use the <a href="https://github.com/angular-ui/bootstrap/tree/master/src/modal" rel="nofollow">$modal</a> service and do the styling yourself to make it look the same. Take a look at this plunkr:</p> <p><a href="http://plnkr.co/edit/WLJfs8axxMJ419N2osBY?p=preview" rel="nofollow">http://plnkr.co/edit/WLJfs8axxMJ419N2osBY?p=preview</a></p> <p>It is as simple as:</p> <pre><code>$modal.open({ templateUrl: 'someTemplateOfTheModal', controller: SomeControllerOfTheModal, }) </code></pre> <p>You can refer to <a href="http://angular-ui.github.io/bootstrap/#/modal" rel="nofollow">this</a> for options.</p> <p>Otherwise, if we are just talking about how to integrate existing jquery stuff in angular, I would still suggest rebuilding it from scratch in the angular way. Basically replace all jquery trigger/event functionality by pure angular.</p> <p>For example, a modal can be on or off, might have an overlay or not. The modal itself would probably be used to execute a callback event on yes and not on cancel. You might want to also style it using custom classes so you should take that into consideration. Here are the directives you might wanna take a look if you are rebuilding it from scratch:</p> <ul> <li>ng-if/ng-show (would probably be used to show/hide your modal and/or overlay)</li> <li>ng-class (would be used to inject any custom classes you might want to put on your modal)</li> <li>ng-include (in case you want your modal to be templatized)</li> <li>ng-click (to do click events on click of your yes/no/cancel buttons and/or clicking away from the modal or on the overlay)</li> </ul> <p>You can see that it can get a bit cluttered, so the best thing would be to use angular's $modal service because it has all those features builtin. I think it has everything that you might possibly want from a modal, and you should just style it. But of course, for learning purposes, you might want to reinvent the wheel.</p>
    singulars
    1. This table or related slice is empty.
    1. POProper way to build a Modal component in Angular
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USNikola Yovchev
    1. USNikola Yovchev
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COCareful with the $modal service, it doesn't play nice with Bootstrap 3.
      singulars
      1. PO
      1. USNicolasMoise
    2. COThanks for the thorough post, baba. I don't want to use angular-ui (which isn't part of Angular) for the $modal implementation, I would rather do it myself and understand how to do that. What isn't clear to me is this: it's obvious that DOM listeners will be in a directive and show/hide methods in a service. However, when I call the show method or a changeModalTitle or a changeModalContent method from the controller, how would the directive know?
      singulars
      1. PO
      1. USFrancisc
    3. COIt can have a two-way scope binding ('=') to the title attribute. Then you don't even have to call functions. You can just do: modal.title = 'someTitle'; and your angular would update your model. And besides, @NicolasMoise I use $modal and bootstrap 3 successfully for a long time already. Not sure why you would say that.
      singulars
      1. PO
      1. USNikola Yovchev
 

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