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 :)
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?
Related
I have responsive angular web-site. When i use it on mobile device i can see different angular code strings eq.
"{{some.objects.value}}"
when rotation is over value seems to be ok.Any sugestions to hide angular code on rotation?
Look at the documentation for ng-cloak. This will hide sections of the page until the angular elements have rendered. This happens on rotation because the page is being re-rendered, so you briefly see the uncompiled angular strings.
Add this to your css
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
Then you can use the ng-cloak dirrective on any element.
<div id="item" ng-cloak>{{ 'hello' }}</div>
I have a custom directive where I present the values in it using {{}} but the problem is when the page is reloading I get to see {{}} there before setting the values. I tried using ng-cloak but too bad it is not working for me. After googling this I found an article stating that the problem might be timing: that angular takes time to use ng-cloak when loading large contents. Is this right? Do I have to change anything in my settings? Is there a value I should pass to ng-cloak?
Here's my custom directive
<button ng-click="myCtrl.clicked()" ng-hide="myCtrl.conditionOne" ng-disabled="myCtrl.conditionTwo" class="{{myCtrl.class}}" ng-cloak>
{{myCtrl.value}}
</button>
Typically, when ng-cloak "isn't working" it's due to not having the accompanying CSS:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
Straight from angular docs:
For the best result, the angular.js script must be loaded in the head section of the html document; alternatively, the css rule above must be included in the external stylesheet of the application.
And that optional rule is:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
I am getting the flickering of content. Trying to resolve it by using ng-cloak but that's not working. I have one main view and multiple templates for separate views. My main view includes
<section id="ng-app">
<div ui-view ng-cloak></div>
</section>
I added ng-cloak here and in CSS
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
But inspite of this, the flickering is still there. Do I need to include ng-cloak separately in all the template files? Can anyone help me on this?
I have a simple verification that evaluates in my controller:
<span class="....." ng-show="!ruleHasAnsweredQuestions()">
Please answer all questions</span>
In the controller:
$scope.ruleHasAnsweredQuestions = function() { return a+b+c>9; }
It's really slow though, taking 1/2 second or so to re-evaluate "a", "b" or "c" changes.
In a general sense, how can I speed up the UI so that once a,b,c changes, the UI is updated faster?
You can add ng-cloak
<span class="....." ng-show="!ruleHasAnsweredQuestions()" ng-cloak>
This will prevent the delay.
According to angular js documentation, ng-cloak works by temporarily hiding the marked up element and it does this by essentially applying a style that does this:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
Use this. test done in this plunker:
<span ng-show="(a+b+c) > 9">
Please answer all questions
</span>
Turns out I had added "Animate.css" and the directive 'ngAnimate' to the elements causing a double long animation.
Removing Animate.css fixed it
I have HTML like this:
<div id="top"
ng-hide="app.stateService.displayModal">
<div>{{ app.userService.data.name }}</div>
</div>
// Body HTML here. No images are loaded. Just Divs
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script src="/Scripts/angular.js"></script>
Now the page briefly shows {{ app.userService.data.name }}.
If I want this to not show then do I have to have AngularJS in the head of my document? The reason I placed AngularJS at the end was because I wanted to have the page appear as quickly as possible.
Can someone advise me about this and also tell me how I can make the {{ xxx }} hidden when the page first loads up.
You could use ng-cloak to hide any elements until it get compiled.
<div id="top" ng-cloak
ng-hide="app.stateService.displayModal">
<div>{{ app.userService.data.name }}</div>
</div>
The CSS rules to hide the elements with ng-cloak will be added automatically by angular.js.
If that isn't fast enough you could add the css rules yourself at the head:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
Or using the angular-csp.css file.
Also see: ngCloak documentation
you can do it in two ways -
ng-bind
OR
ng-cloak
{{ app.userService.data.name }}
Either way, you {{}} won't show up. no need to put angular.js inside head.
This is the role of the ng-cloak directive used as a css class.
Check doc: https://docs.angularjs.org/api/ng/directive/ngCloak
You better use ng-bind
<span ng-bind="app.userService.data.name"></span>
instead of {{app.userService.data.name}}.
This will avoid that flickering.