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
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 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 div element that I only want to be show when my list of items empty. So I put in the following(in haml):
#no-items.ng-cloak{ :ng_show => "items.length <= 0", :ng_cloak => true }
However, even after I've done that the element is still flashing on the screen. Then I saw Angularjs - ng-cloak/ng-show elements blink, but even after adding the following in my CSS, the blink still occurs.
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
Any ideas what I am doing wrong?
You can put ng-hide in the class without affecting how the JS will work once loaded. However, it is useful to put it there so that CSS takes it into account while waiting for the JS to load.
<div data-ng-controller="RoomsController">
<div ng-cloak class="ng-cloak ng-hide" data-ng-if="visible" >
Some text
</div>
</div>
Ensure the ng-cloak CSS shown above is being loaded at the beginning of your page.
This should be all you need to do:
<div ng-hide="items.length" ng-cloak>no items</div>
Sample fiddle.
None of the solutions worked for me. The only solution I found is the following:
In each controller, add:
$scope.$on('$viewContentLoaded', function () {
$scope.completed = true;
});
and in the html of each view , add ng-if="completed" to the topmost element. For example:
<div ng-if="completed">
Note: the problem is restricted to firefox and ui-router. There, ng-cloak is ignored and there is no css workaround. The only solution that worked for me is the one I gave above.
There's currently an open issue for this:
https://github.com/angular/angular.js/issues/14015
This workaround worked for me:
.ng-hide.ng-hide-animate {
display: none !important;
}