AngularJS 重复元素 1 秒

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 !";
    }
});

我的问题是包含消息的 div 在单击登录按钮后的 1 秒内显示了 2 次。因此，在 0.5/1 秒内，我有 2 次相同的 div 和相同的消息。

用户看不到它说的是什么，但他可以看到闪烁的东西。

如何避免眨眼？

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 秒

AngularJS duplicated element for 1 second

javascript

angularjs

angular-ng-if