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.