Я получил следующий контроллер:
.controller('LogInController', function(logInFactory, $scope, $location, $state){
$scope.logIn = function() {
$scope.dataLoading = true;
logInFactory.logIn($scope.email, $scope.password, function (response) {
if (response.success) {
$scope.userName = response.userName;
console.log('userName', $scope.userName);
logInFactory.setCredentials($scope.email, $scope.password);
$location.path('/users');
} else {
$scope.dataLoading = false;
}
});
};
$scope.clearCredentials = function(){
$state.go('login');
logInFactory.clearCredentials();
};
});//End controller
Я хочу использовать его в этом представлении:
<div class="header" ng-controller = 'LogInController'>
<img src= "logo.jpg">
{{userName}}
<button ng-click = 'clearCredentials()'> Cerrar sesión</button>
</div>
Но userName не отображается в представлении, но когда я печатаю его на контроллере, он отображается правильно. Это представление отображается после вызова функции logIn().
Это функция logIn на моей фабрике:
var logIn = function(email, password, callback){
var URL;
if(ENV.mocksEnable){
URL = ENV.apiMock + ENV.logInMock;
return (
$timeout(function () {
var response;
getUser()
.then(function (user) {
console.log('USER', user);
if (user !== null) {
response = { success: true, userName: user.userName};
} else {
response = { success: false, message: 'Username or password is incorrect' };
}
callback(response);
});
}, 1000)
);
}else{
URL = ENV.apiURL + ENV.logIn;
return (
$http.post(URL, {email : email, password : password})
.then(function onFulfilled(response){
var data = response.data;
userName = data.username;
userEmail = data.email;
userId = data.id;
profiles = data.profiles;
callback(response);
return data;
})
.catch(function onRejected(errorResponse){
console.log('Error in logInFactory');
console.log('Status: ', errorResponse.status);
callback(errorResponse);
return errorResponse;
})
);
}
};//End login
Я запускаю функцию logIn() в этом представлении
<form ng-submit = 'logIn()'>
<h1>Log In</h1>
Correo electrónico:
<input type="email" ng-model='email' required><br>
Contraseña
<input type="password" ng-model='password' required><br>
<input type="submit" value="Log in">
</form>
Когда я тигрирую logIn(), я должен пойти в этот заголовок и показать имя пользователя.
Моя проблема заключалась в том, что я ожидал получить данные от контроллера до двух разных видов. И когда я перехожу из режима LogIn в свой заголовок, контроллер обновляет свои данные. Итак, я должен создать на своей фабрике:
var getUserName = function() {
return userName;
};
И в контроллере
$scope.userName = logInFactory.getUserName();
Теперь мое имя пользователя сохраняется на заводе.
у нас нет вашего заводского кода, но эта строка для меня очень странная:
logInFactory.logIn($scope.email, $scope.password, function (response) { ..; } )
так что вы проходите передачу на завод, и это не завод, который возвращает данные контроллеру.
это должно быть примерно так:
logInFactory.logIn($scope.email, $scope.password).then(function (response) { ..; } );
EDIT: вам нужно удалить функцию обратного вызова с вашего завода и вернуть заводские данные и обработать данные, подобные этому logInFactory.logIn($scope.email, $scope.password).then(function (response) {..; } );
,
Вы входите в консоль, но область $ не разделяется между фабрикой и контроллером, поэтому обратный вызов на заводе редактирует значение $scope.userName
но контроллер не может получить это изменение.
У вас есть $ scope.userName внутри успеха метода logIn. Он не будет доступен, пока это не произойдет.
Если вы поместите $ scope.userName вне метода и установите его на что-то, оно появится.
.controller('LogInController', function(logInFactory, $scope, $location, $state) {
$scope.userName = 'test name';
$scope.logIn = function() { ...
Что-то вроде того.
Результат вашей функции logIn() может быть недоступен.
Попробуйте обернуть результат функции logIn в $ timeout (который вызывает $ apply, способ заставить Angular обновить область контроллера):
$timeout(function() {
if (response.success) {
$scope.userName = response.userName;
console.log('userName', $scope.userName);
logInFactory.setCredentials($scope.email, $scope.password);
$location.path('/users');
} else {
$scope.dataLoading = false;
}
});
Не забывайте вводить время ожидания зависимости $ time в вашем контроллере.
почему вы запускаете clearCredentials()
? тогда как в соответствии с этим кодом вы должны запускать login()
.
$scope.$apply()
или$scope.$digest()
после установки его в обратном вызове success.