Angularjs Show logout button when I click SignIn button
I have a login form to a specific part (which 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 the Login button, I need to show the Logout button. this is on the home page along with the menu.
How can I get it? I have tried using ng-show with no 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;
}
}).
source to share
I would suggest that you should have a base controller like dashboardCtrl
or the mainAppCtrl
first controller that loads after the application config phase.
This single controller should handle all the logic for your login and exit code.
You are calling loginController
twice from index.html
and logic.html
(in your main controller), which is not that good in my opinion.
You have to initialize main controller displaying div (form) for login and after user login. The $scope.loginForm()
function call you must set the flag in your case $scope.loggedIn
to true
.
Since this is the only controller, you have a common $scope
one that binds with the values in the views and the controller, so using it ng-show
should work.
Calling controllers on divs should be avoided as you do for a task that needs to use shared scope.
Edit: - You can use ng-route or ui-router (much better) in config mode to create routes that handle the task for routing.
With ui-router code for routing it looks like this.
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/state1");
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})
});
ui-router has a lot of configuration options to check in the docs. Similarly, you can search the code for the ng-router code in the angular docs.
source to share
Each time you use the "ng-controller" attribute it creates a new controller instance, so your login form doesn't have the same scope as your logout button.
Move the controller attribute up in the DOM so that it closes the form and button and updates the ng-show exit button 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 login controller.
source to share