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;
}
Related
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?
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 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 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