Question

我的登录表单包含一个显示错误消息的框

<div class="ui negative message" ng-if="vm.message != ''">
    <span ng-bind="vm.message"></span>
</div>

消息在我的控制器中设置

LoginService.checkUser(vm.credentials).then(function(res) {
    $rootScope.token = res.data.token;
    $state.go('home');
}, function(err) {
    vm.error = true;
    if(err.status == 401){
        vm.message = "Error !";
    }
});

我的问题是，在点击登录按钮后的1秒内，包含该消息的div会显示2次。因此，在0.5 / 1秒期间，我有相同消息的div的2倍。

用户无法看到它的内容，但他可以看到闪烁的东西。

我怎样才能避免眨眼？

Answer 1

您的ng-if无法在您的HTML中使用，请将其更改为：

<div class="ui negative message" ng-if="vm.message">
  <span ng-bind="message"></span>
</div>

声明ng-if="vm.message != ''"没有隐藏导致闪烁的元素。您甚至可以在加载控制器时在控制器中声明vm-message = null，以确保它。

Answer 2

好的，错误有点愚蠢，并且是我没有展示的部分代码。

完整登录功能

    vm.error = false;
    if (vm.credentials.username == '' || vm.credentials.password == '') {
        vm.error = true;
        vm.message = "Required username+password";
        return;
    }
    vm.message = "" //HERE IS THE PROBLEM

    LoginService.checkUser(vm.credentials).then(function(res) {
        $rootScope.token = res.data.token;
        $state.go('home');
    }, function(err) {
        vm.error = true;
        if(err.status == 401){
            vm.message = "Error";
        }
    });

在将消息设置为错误之前，我正在编辑消息。

我删除了这一行vm.message = ""，它现在正常工作

AngularJS重复元素1秒钟

2 个答案: