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>
Related
I have 4 forms of which using angular ng-hide and ng-show to display each when needed. But when the page loads initially it displays all forms while loading and only hide them when loading completes. It really looks crappy while loading. Is there a way i can prevent this from happen?
ng-cloak will work for you
example:
in your css:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
and in your code:
<div id="template1" ng-cloak>{{ 'hello' }}</div>
CSS:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
HTML:
<body ng-cloak> ... </body>
will work, but it will hide whole body. https://docs.angularjs.org/api/ng/directive/ngCloak:
The directive can be applied to the element, but the preferred usage is to apply multiple ngCloak directives to small portions of the page to permit progressive rendering of the browser view.
so it's better to apply ng-cloak to particular elements:
<div ng-cloak> ... </div>
<div ng-cloak> ... </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.