2

Say I have the below html:

<div>{{name}}</div>

I want to delay the interpolation on {{name}}, so that I can see the curly bracket on html(raw data).

My first thought is to create an attribute directive called pause, and in the compile function of this directive, just call $timeout to pause for a while.

The html should look like this, the 10000 is the pause interval.

<div pause="10000">{{name}}</div>

However it didn't pause, is there another way to achieve this?

Lucas
  • 9,871
  • 5
  • 42
  • 52
doranT
  • 167
  • 3
  • 11
  • So you purposefully want to see the curly brackets for, say, 10 seconds? Just want to make sure I'm clear. Also, can I ask the purpose of this in your context? – Josh Beam Feb 24 '16 at 18:57
  • Yes, that's correct. The context is there is a defect in our project raised up against this issue, we decided to use ng-cloak to fix this issue, it is fixed. However the quality process in our project requires a test case to validate the fix, this interpolation slowness is not happening everytime, so we need a way to reproduce the interpolation slowness constantly, so that we can validate our fix. I know it sounds silly but we have very strict QA process rules. – doranT Feb 24 '16 at 19:25
  • 1
    Thanks for replying. That's very interesting. So really the broader question is trying to figure out the best way to test that ng-cloak is working in an automated test? – Josh Beam Feb 24 '16 at 19:27
  • It doesn't have to be an automated test. But yes, it also helps make sure the root cause of the slow interpolation is due to angularJS, not some other reason. – doranT Feb 24 '16 at 19:44

1 Answers1

2

Adding the ng-non-bindable to an element prevents the interpolation of the element's contents.

From the AngularJS docs:

<div>Normal: {{1 + 2}}</div> <!-- 3 -->
<div ng-non-bindable>Ignored: {{1 + 2}}</div> <!-- {{1 + 2}} -->

To delay the process, your custom directive could add the ng-non-bindable directive to the element initially and remove it after a timeout.

WeNeigh
  • 3,489
  • 3
  • 27
  • 40