Изменение значения объема после нажатия кнопки с вызовом API

Question

Я пытаюсь написать функцию входа в систему для проекта. Идея состоит в том, что когда пользователь нажимает кнопку входа в систему, тогда вызывается функция checkLogin , которая проверяет сервер в фоновом режиме для пользователя.

Все хорошо, за исключением случая, когда пользователь не найден, затем должно появиться сообщение об ошибке, которое контролируется с помощью логического значения (например, $ scope.displayValidationMessage ) и ng- показать директиву .

Я пытался использовать $ scope. $ Apply () или $ scope. $ Digest () безрезультатно. Я использую AngularJS версии 1.7.8.

$scope.email = "";
$scope.pass = "";
$scope.displayErrorMessage = false;
$scope.displayValidationMessage = false;

$scope.checkLogin = function(){
        if($scope.email==""||$scope.pass==""){
            return $scope.displayValidationMessage=true;
        }
        var pdat = {
            username:$scope.email,
            password:$scope.pass
        };

        $http({
            method:'post',
            url: 'http://www.example.org',
            data:pdat
        }).then(function success(response){
            var resnum = response.data.resnum;
            if(resnum==1){ //User found
                var data = response.data.data;
                $cookies.put('token',data.token);
                $cookies.put('id',data.id);
                $location.path('/main')
            }else{//User not found
                $scope.displayErrorMessage = true;
            }
        },function error(response){
            $scope.displayErrorMessage=true;
        });


    };

       <div class="notification is-warning" ng-show="displayValidationMessage">
           Please fill in every field in the form!
       </div>

Как я могу повлиять на то, что измененное значение логических значений отобразит соответствующее сообщение об ошибке?

Answer 1

Когда вы входите в функцию ошибки, поскольку пользователь не найден, вы устанавливаете $scope.displayErrorMessage как true.

Но в HTML есть только один div с переменной displayValidationMessage.

Добавьте еще один div с ng-show="displayErrorMessage" и внутри него добавьте сообщение об ошибке, подобное этому:

 <div class="notification is-warning" ng-show="displayErrorMessage">
     User not found!
 </div>

Answer 2

1 : вам не нужно устанавливать значение по умолчанию как false, все переменные false по умолчанию, а также ваши email и pass пусты в виде строки.

if(angular.isUndefined($scope.email)) {...}

2 : попробуйте преобразовать свои свойства как один object, это поможет вам оптимизировать коды.

--------------------------------------Html
<input ng-model="form.email">

<input ng-model="form.pass">
--------------------------------------Controller
scope.form = {email: "", pass: "", message: { validation: "", error: "" } }

3 : вам не нужно return в angularjs, когда вы используете scope, и вам нужно:

if(...) { scope.x = true; return false; }

4 : $scope.$apply() не работает, когда выуже используют собственные коды angularjs, например, когда вы используете scope, это уже apply() в вашем угловом коде:

var textInput = $(".textInput").val(); //jquery selector
$scope.textInput = textInput; // not bind until $apply
$scope.$apply(); //scope applied

5 : как @briosheje сказал в ваших комментариях, $scope.displayErrorMessage не используется в вашем html, вы должны использовать его как то, что вы сделали с $scope.displayValidationMessage.