我的Angular控制器功能中未定義“已認證”。 我不確定自己在做什么錯。 用盡所有選項。

Question

在我的Angular控制器中，“未定義經過身份驗證。我只想在用戶登錄時顯示更新按鈕。我在用戶登錄時使用ng-show，否則隱藏按鈕。有人可以指導我我嗎？做錯了嗎？

的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;

模板

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

Answer 1

有一個錯字：

console.log(authenticated);

也許您想要這樣：

console.log('authenticated');

或者可能：

console.log(user);

因為不存在經過身份驗證的變量，所以不會移動到下一行來設置$ scope.authenticated = true;。

Answer 2

您使用<div ng-if="loggedin">切換Update鏈接。

但是在您的控制器中，您永遠不會設置loggedin的值。 相反，您設置$scope.authenticated = true; 。 我認為您需要設置$scope.loggedin = true; 。

Answer 3

為了用一個例子來回答這個問題，您遇到了多個問題，變量名不一致， console.log有一個未定義的對象，稱為authenticated ，

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

您應該使用下面的代碼設置在控制器和$ rootScope登錄的代碼。 它包括讓您避免在控制器中使用$ scope，而轉向“ controller as vm”，我建議您訪問http://www.johnpapa.net/angular-style-guide/

該代碼還提供了日志記錄實用程序，因為它可以幫助您記錄日志錯誤，因為您可以在服務中添加try / catch。

控制器和記錄實用程序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;
    }

})();

控制器標記

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

條件Div標記

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