Search code examples
angularjsng-bind-htmlng-bind

rendering ng-bind with extra characters in the expression

I am using ng-bind to avoid seeing my {{variables}} while rendering the page, and it's working well except that when I add the extra characters of () to wrap one of the variables they seem to appear like empty () while the page is still rendering 

<span ng-bind="(selected.id) + ' (' + (selected.serialnumber) + ') ' "></span>

any suggested solution or workaround ?

Solution

  • You can use ng-cloack.

    The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading.

    Documentation. here

    <!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ng-cloak-production</title>
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  

  
</head>
<body ng-app="">
  <u>with ng-cloak: (Expression hidden)</u>
 <div ng-cloak>{{ 'Hello world' }}</div>
 <div class="ng-cloak">{{ 'Hello world' }}</div>
  
 <u>without ng-cloak: (Expression visible first time)</u>
 <div>{{5+3+333+555}}</div>
 <div>{{ 'world' }}</div>
</body>
</html>