AngularJS - How to define an initial delay for ng-bind

Question

we have a span element which looks like this:

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

(Just as info: we have a little fade-in, fade-out animation for this link, that's why we had to use ng-show instead of ng-if)

The problem is, when the page is initially loaded, ng-bind binds the text, and just for a few miliseconds we see the link (flickering problem), then comes ng-show and showLink returns false initially, link will be hidden.

How can we achieve this setup so that, the initial load of the page does not show the link at all?

PS: I could of course create a function which delivers the text with a setTimeout (300ms). But i would like to see if there is a better way to do it without timeout.

Sajal · Accepted Answer · 2018-01-09 08:16:30Z

2

Bind the ng-cloak attribute

The ngCloak directive is used to prevent the AngularJS html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

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

More details from AngularJs documentation

answered Jan 9, 2018 at 8:16

Sajal

4,4111 gold badge22 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sajal Over a year ago

Does showLink() always returns false on initial page load?

akcasoy Over a year ago

should we see the ng-cloak attribute in the rendered html code? at the moment we do not see that.

akcasoy Over a year ago

Does showLink() always returns false on initial page load? Yes.. also a simple "return false" does not change anything. Also ng-show="false"

Sajal Over a year ago

No, you don't see the ng-cloak in the rendered html code. Alternately, you could set the style of the element to hidden by default if showLink() always returns false on initial page load

akcasoy Over a year ago

no cache problem.. but adding class ng-hide did the trick. thank you! i will post this as a separate answer..

|

Ritesh Ranjan · Accepted Answer · 2018-01-09 08:56:15Z

0

Just inject $timeout in your controller and use this.

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

Also you can use $digest or $apply as below

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>

answered Jan 9, 2018 at 8:56

Ritesh Ranjan

1,0121 gold badge9 silver badges17 bronze badges

3 Comments

akcasoy Over a year ago

please look at the end of my question.. i explicitly wrote that i do not want a timeout..

Ritesh Ranjan Over a year ago

sorry i missed that point, but you can also do it by: <input type ng-model="query" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 2000, 'blur': 1 } }" />

Ritesh Ranjan Over a year ago

refer this You may find thid intresting docs.angularjs.org/api/ng/directive/ngModelOptions

akcasoy · Accepted Answer · 2018-01-09 09:04:13Z

0

i simply added the class "ng-hide" to the class attribute of my span element, and did the trick in my case..

answered Jan 9, 2018 at 9:04

akcasoy

7,31816 gold badges68 silver badges113 bronze badges

Collectives™ on Stack Overflow

AngularJS - How to define an initial delay for ng-bind

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related