0

I have two buttons (login and logout):

<button type="submit" class="btn btn-info btn-sm" ng-controller="signinController" ng-click="go()"> Sign in</button>

<button type="submit" class="btn btn-danger btn-sm"  ng-controller="signinController"   ng-click="goOut()">Sign out</button>

When I authenticate (using signinController), I would like to access each of these buttons and choose (as appropriate) to hide. Is it possible?

SignController

controller('signinController', function($scope, $location, $http, $window, AuthService) {
  $scope.signinForm = function() { 
      // access and hide login button
  }

$scope.go = function() {   
    $location.path("/signin");
};

$scope.goOut = function() {   

};

});

Anyone can help me?

1 Answers1

1

Yes, this is possible, and there are many different ways to do it. Probably the easiest and most intuitive way to do it is to use the ng-show directive as follows:

<div ng-controller="signinController">
  <button ng-click="signIn()", ng-show="!loggedIn"> Sign in </button>
  <button ng-click="signOut()", ng-show="loggedIn"> Sign out </button>
</div>

With the following controller code

controller('signinController', function ($scope, $http) {

  $scope.signIn = function () {
    // for example:
    $http.post('login', {username: $scope.username, password: $scope.password})
    .then( function () {
      $scope.loggedIn = true;
    });
  }

  $scope.signOut = function () {
    $http.get('logout')
    .then( function () { 
      $scope.loggedIn = false;
    });
  }

});

What this direcitve is doing is essentially monitoring the loggedIn field on the $scope, then showing or hiding the relevant button when it changes. Obviously you need to use your own logic the do the login and logout functions, but the important part is to set the value of $scope.loggedIn when they have been successful.

By the title of your question, particularly the (by ID) part, it looks like you've come from a jQuery background. This question has some great answers - I would strongly advise having a read.

Community
  • 1
  • 1
Ed_
  • 18,798
  • 8
  • 45
  • 71
  • Thank you for the answer. But the method signIn() it is only a "redirect" to other page. So, it is the other that contains the button that call signinForm. –  Jan 07 '15 at 01:11
  • I'm not sure what you mean I'm afraid, but redirecting to another page is not really a great thing to do when using a single page web application framework like angular. Can I suggest following some tutorials as you seem to be missing the basics. [This course](https://thinkster.io/angulartutorial/a-better-way-to-learn-angularjs/) was incredibly useful for me. – Ed_ Jan 07 '15 at 01:14