Angularjs Show the Disconnect button, when I click on the SignIn button

advertisements

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;
  }
}).


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.