Totally prevent displaying of curly braces in angular directive?

Question

I want curly braces to be never displayed to user. I know about ng-cloak, but it seems not hiding them during link function...

Here is modified plunker from angular docs.

I added ng-cloak to my-pane.html:

<div class="tab-pane ng-cloak ng-cloak" ng-cloak ng-show="selected">

and css for ng-cloak to index.html:

 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, 
 .x-ng-cloak {
   display: none !important;
 }

And a breakpoint to link function of 'myPane' directive:

  link: function(scope, element, attrs, tabsCtrl) {
    tabsCtrl.addPane(scope);
    debugger;
  },

Open dev tools and rerun the plunk. When execution stops on breakpoint, curl braces are visible to user.

Is it possible to fix it somehow - angular way would be nice :)

If you remove the breakpoint, does it display the curly braces? — rrd, Aug 29 '17 at 09:36
@rrd without breakpoint it instantly process the template, it is done very fast , breakpoint is needed to see what is displayed to user on during link function — Sol, Aug 29 '17 at 10:19

score 0 · Answer 1 · answered Aug 29 '17 at 09:23

0

Use ng-bind instead of {{ }} as it's designed to stop the very issue you're running into. Please see this SO answer: AngularJS : Why ng-bind is better than {{}} in angular?

answered Aug 29 '17 at 09:23

rrd

I want **all** my content to be hidden until it is not processed, 'ng-bind' hides only a part of it. – Sol Aug 29 '17 at 09:29

1 Answers1