“Authenticated” is not defined in my controller function in Angular. I am not sure what I am doing wrong. Running out of all the options.

Question

In my Angular controller, "authenticated is not defined. I want to show the Update button only when the user is logged in. I am using ng-show when the user is logged in, otherwise hide the button. Can someone guide me what I am doing wrong?

JavaScript

$scope.signIn = function () {
   $rootScope.auth.$login('password', {
     email: $scope.email,
     password: $scope.password
   }).then(function (user) {
     Materialize.toast('Logged in successfully', 1000);
     console.log(authenticated);
     $scope.authenticated = true;
   }, function (error) {
     if (error = 'INVALID_EMAIL') {
       Materialize.toast('Email invalid or not signed up — trying to sign you up!', 5000);
       $scope.signUp();
     } else if (error = 'INVALID_PASSWORD') {
       console.log('wrong password!');
       Materialize.toast('Invalid password', 1000);
     } else {
       console.log(error);
     }
   });
 };

 $scope.loggedin = false;

Template

<div ng-if="loggedin">
   <a class="btn waves-effect waves-red" ng-href="/#/editWelcome/{{welcome._id}}">Update
 </a>
</div>

Answer 1

There is a typo:

console.log(authenticated);

maybe You wanted like this:

console.log('authenticated');

or maybe:

console.log(user);

because of authenticated variable does not exists, it does not move to next line to set $scope.authenticated = true;

Answer 2

You use <div ng-if="loggedin"> to toggle the Update link.

But in your controller, you never set the value of loggedin . Instead, you set $scope.authenticated = true; . I think you need to set $scope.loggedin = true; .

Answer 3

To answer the question with an example, you had multiple issues, the variable names are inconsistent, your console.log has an undefined object called authenticated ,

$scope.authenticated = true; VS $scope.isLoggedIn = false.

You should use code below which sets the logged in at the controller and $rootScope. It includes getting yourself away from using $scope in the controller in favor of 'controller as vm', I suggest looking at http://www.johnpapa.net/angular-style-guide/

The code also provides a logging utility as this will help you with the logging error because you can add try/catch in the service.

Controller and Logging Utility JS

(function () {

    var moduleId = 'app';
    var controllerId = 'AngularController';

    //define controller
    angular
        .module(moduleId)
        .controller(controllerId, angularController);

    angularController.$inject = ['$rootScope', 'logUtil'];

    //Your controller code
    function angularController($rootScope, logUtil) {

        var vm = this;
        vm.title = 'Your controller title';
        vm.isLoggedIn = angular.isDefined($rootScope.isLoggedIn) ? $rootScope.isLoggedIn : false;
        vm.signIn = signIn;
        vm.signUp = signUp;

        function signIn() {
            $rootScope.auth.$login('password', {
                email: $scope.email,
                password: $scope.password
            }).then(function (user) {
                Materialize.toast('Logged in successfully', 1000);
                logUtil.logDebug('authenticated');
                vm.userId = user.id;
                $rootScope.isLoggedIn = true;
                vm.isLoggedIn = true;
            }, function (error) {
                $rootScope.isLoggedIn = false;
                vm.isLoggedIn = false;
                if (error === 'INVALID_EMAIL') {
                    logUtil.logDebug('no user');
                    Materialize.toast('Email invalid or not signed up — trying to sign you up!', 5000);
                    vm.signUp();
                } else if (error === 'INVALID_PASSWORD') {
                    logUtil.logDebug('wrong password');
                    Materialize.toast('Invalid password', 1000);
                } else {
                    logUtil.logError(error);
                }
            });
        };

        function signUp() {
            //sign up function
        }

        activate();

        function activate() {
            logUtil.logDebug('Controller activated: ' + controllerId);
        }
    };

    //logging utility constants
    angular.module(moduleId).constant('logUtilConstants', {
        LOG_ERROR_MESSAGES: true,
        LOG_DEBUG_MESSAGES: true
    });

    //logging service
    angular.module(moduleId).service('logUtil', logUtil);

    logUtil.$inject = ['$log','logUtilConstants'];

    function logUtil($log, logUtilConstants) {

        var service = {

            logError: function (logMessage) {
                if (logUtilConstants.LOG_ERROR_MESSAGES) {
                    $log.error(logMessage);
                }
            },

            logDebug: function () {
                try {
                    if (logUtilConstants.LOG_DEBUG_MESSAGES) {
                        var args = Array.prototype.slice.call(arguments, 0);
                        var strArgs = args.join(' ');
                        $log.debug(strArgs);

                    }
                } catch (e) {
                    console.log('log debug error', e);
                }
            }
        }
        return service;
    }

})();

Controller Markup

<div ng-controller="AngularController as vm">
   {{ vm.title }}
</div>

Conditional Div Markup

<div ng-if="vm.loggedin">
   <a class="btn waves-effect waves-red" ng-href="/#/editWelcome/{{vm.userId}}">Update</a>
</div>