在我的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>
最佳答案
为了用一个例子来回答这个问题,您遇到了多个问题,变量名不一致,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>