Question

我们有一个span元素，如下所示：

<span role="link" ng-show="showLink()" ng-bind="textLink"></span>

（就像信息：我们有一个淡入淡出的动画，这个链接，这就是为什么我们不得不使用ng-show而不是ng-if）

问题是，当页面最初加载时，ng-bind绑定文本，只是几毫秒我们看到了链接（闪烁问题），然后ng-show和showLink最初返回false，链接将是隐藏。

我们如何实现此设置，以便页面的初始加载根本不显示链接？

PS：我当然可以创建一个使用setTimeout（300ms）传递文本的函数。但我想看看是否有更好的方法没有超时。

Answer 1

绑定ng-cloak属性

ngCloak 指令用于阻止AngularJS html模板来自浏览器的原始（未编译）短暂显示在您的应用程序加载时表单。使用此指令可以避免由html模板显示引起的不良闪烁效应。

<span role="link" ng-show="showLink()" ng-bind="textLink" ng-cloak></span>

More details from AngularJs documentation

Answer 2

在控制器中注入$ timeout并使用它。

$timeout(function() { $scope.showLink = false;}, 2000);

您也可以使用$ digest或$ apply

setTimeout(function() {
    $scope.showLink = false;
    $scope.$digest();
}, 2000);

setTimeout(function () {
  $scope.$apply(function(){
      $scope.showLink = false;
  });
}, 2000);


<span role="link" ng-show="showLink" ng-bind="textLink"></span>

Answer 3

我只是添加了课程＆＃34; ng-hide＆＃34;到我的span元素的class属性，并在我的情况下做了诀窍..

AngularJS - 如何定义ng-bind的初始延迟

3 个答案: