Angularjs Show logout button, when I click in SignIn button

Question

I have an login form in a specific partial (that is presented in the body of the main page).

login.html

 <form   name="loginForm" class="form-horizontal" ng-controller="loginController" ng-submit="submit()" novalidate>  
     <div  class="input-group" >                              
        <input type="text" class="form-control" name="username" ng-model="username"  >
    </div>             
    <div  class="input-group" >
     <input type="password" class="form-control" name="password" ng-model="password" >
     </div>

    <div style="margin-top:10px" class="form-group">
         <!-- Button -->
         <div class="col-sm-12 controls">
            <button  type="submit" class="btn btn-info"><i class="icon-hand-right"></i>Log In</button> 
         </div>
     </div>          
</form>

So, when i click in Login button, I need to show a logout button. this is on the main page along with the menu.

How do I get it? I've tried using the ng-show without success

index.html

<button type="submit"  ng-show="showBtn"  ng-controller="loginController"   ng-click="logOut()">Sign out</button>

controller.js

controller('logincontroller', function($scope) {
   $scope.showBtn= false;
   $scope.loginForm = function() { 
     $scope.showBtn= true;
  }
}).

What if you use ng-show="loggedIn" instead of ng-show="showBtn"? — David Frank
– David Frank, Commented Jan 9, 2015 at 2:09

David Williams · Accepted Answer · 2015-01-09 02:12:10Z

1

Every time you use the 'ng-controller' attribute, it creates a new instance of the controller, so your login form does not share the same scope as your logout button.

Move the controller attribute higher up in the DOM so it covers the form and the button and update the logout button's ng-show to:

<button type="submit"  ng-show="loggedIn"  ng-controller="loginController" ng-click="logOut()">Sign out</button>

then the button will only show when $scope.loggedIn is true in your shared loginController.

answered Jan 9, 2015 at 2:12

David Williams

2292 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashish Singh · Accepted Answer · 2015-01-21 07:45:50Z

I would suggest you should have a base controller such as dashboardCtrl or mainAppCtrl the first controller that loads up after the config phase of the application.

This single controller should handle all the logic for your login and logout code.

You are calling loginController twice from index.html and logic.html(in your main controller) which in my opinion is not that good a practice.

You should initialize the main controller showing the login div(form) and after the user logs in. Call $scope.loginForm() function you should set a flag in your case $scope.loggedIn to true.

As this is a single controller you have a common $scope which has binding with values in views and controller so using a ng-show should work.

Calling of controllers on divs like you are doing for task which need to use a common scope should be avoided.

Edit:- You can use ng-route or ui-router(much better) providers at config time to create routes that handle the task for routing.

With ui-router code for routing looks like this.

myApp.config(function($stateProvider, $urlRouterProvider) {
   $urlRouterProvider.otherwise("/state1");
   $stateProvider
     .state('state1', {
         url: "/state1",
         templateUrl: "partials/state1.html"
     })
});

ui-router has many configuration options check it out in docs. Similarly you can look for code for ng-router code in angular docs.

Collectives™ on Stack Overflow

Angularjs Show logout button, when I click in SignIn button

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related