1

Here is what I am trying to achieve: I have a topnav with a login button. When the login button is clicked, I want to display my login popup dialog.

Similarly, certain pages will have a giant "Register" button. I want the login popup to also appear when that button is clicked.

In order for both the topnav and other (outside) components to display the login popup, it was recommend that I create service for my login popup (See my previous question: (Separate controller from directive?)

My question is: Can someone please outline the steps I need to take in order to create this service? I'm having a bit of trouble, even after reading the documentation.

Here's what I have so far:

angular.module('myApp')
    .factory('login', LoginService);

function LoginService() {
    return {
        showLoginPopup: function () {
            // Need to show my login popup here 
        }
    }
}

Is this correct so far? Where do I define my HTML for the login popup? Do I use the templateUrl attribute? Is there another recommended approach?

Thanks

Edit

For sake of example, let's assume my template is something very simple

<div class="login-popup">
    <input type="text" id="Username" />
    <input type="text" id="Password" />
    <button>Submit</button>
</div>

I assume I'll need an ng-show attribute. What should this be linked to? Typically, I link it to a property of a controller... But since is initiated by a service, there is no controller object to it. What am I missing?

Community
  • 1
  • 1
Ricky
  • 2,850
  • 5
  • 28
  • 41

0 Answers0