如何在AngularJS中消除闪烁

最新推荐文章于 2021-12-24 10:25:35 发布

原创最新推荐文章于 2021-12-24 10:25:35 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #消除闪烁

本文探讨了在使用AngularJS进行输入验证时产生的闪烁问题，并提供了两种解决方案：使用ng-cloak指令隐藏验证提示直到页面加载完成，以及使用ng-bind替代{{}

我们都知道一些浏览器并不识别HTML5的表单认证，所以我一般使用AngularJS去进行输入验证，但使用AngularJS的输入验证有一个问题就是会产生闪烁。当你访问页面时，错误提示会一闪而过，出现这种情况的原因是因为，AngularJS的数据加载需要时间，尽管时间很短，但依然影响用户体验。如何消除这种影响呢？

1. 在AngularJS中有一个ng-cloak的指令，它将自己下面的内容隐藏，当浏览器加载完成后，这个属性自然会删除。

<form class="form-horizontal" action="/opp/add" method="post" ng-app="addOpp" ng-controller="addOppCtr" name="addForm" novalidate ng-cloak>

    <div class="form-group">
        <label for="client_name"  class="col-sm-2 control-label">Client Name<span style="color:red">*</span></label>
        <div class="col-sm-10">
            <input class="form-control" id="client_name" name="client_name" ng-model="client_name" type="text"  required/>
            <span style="color:red" ng-show="addForm.client_name.$dirty && addForm.client_name.$invalid">
                <span ng-show="addForm.client_name.$error.required">Client Name is required</span>
            </span>
        </div>
    </div>

如上代码所示，ng-cloak下面相关的AngularJS输入验证都将隐藏，只有浏览器加载完成时，输入验证才会产生作用。

2.使用ng-bind代替{{}}。