ng-if shows both elements

Question

I have two buttons that are using ng-if to determine if they should be shown or not. For a brief second, both elements are shown even though they should not be shown together ever. In isolated examples, this works fine, but in my project it has some latency. Very similar to this post: Angular conditional display using ng-if/ng-show/ng-switch briefly shows both elements but that didn't have any answers that were different than what I tried.

<button class="btn btn-primary drop_shadow" ng-if="vm.ingestReady == true"
                ng-click="vm.ingestReady = !vm.ingestReady" ng-cloak> Start Ingest
</button>
<button class="btn btn-danger drop_shadow" ng-if="vm.ingestReady == false"
                ng-click="vm.ingestReady = !vm.ingestReady" ng-cloak>Cancel Ingest
</button>

And controller code is

vm.ingestReady = true;

on page load. So clicking the button should just toggle the view, but for a hot second, both are visible.

Try adding this line in head section and see if it has still the issue. — Indra Uprade, Jun 24 '16 at 20:52
@IndraUprade It didn't change anything, both are still visible for a short period of time. — Ben Winks, Jun 27 '16 at 12:52

score 6 · Answer 1 · edited May 23 '17 at 11:54

6

This is caused by ngAnimate. Try to remove it, if you are not using it. If you don't want to remove ngAnimate, add the following css to your app.

.ng-leave {
    display:none !important;
}

For more detailed answer angular ng-if or ng-show responds slow (2second delay?)

edited May 23 '17 at 11:54

Community

1
1

answered Apr 20 '17 at 23:02

Thomas Negash

401
4
5

Sam · Answer 2 · 2016-06-24T20:41:12.257

0

ng-cloak works using CSS, so you'll need to add this to your styles:

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

On a side note, ng-bind (and ng-class for the btn-primary/btn-danger) may be a better solution for this type of problem. You can bind the button's contents to a JS variable or function like so:

<button class="btn drop_shadow"
        ng-class="getButtonClass()"
        ng-bind="getButtonText()"
        ng-click="vm.ingestReady = !vm.ingestReady"></button>

And then, in the button's scope, you'd just have to add the two referenced JS functions (cleaner than putting this logic inline):

$scope.getButtonClass = function() {
    return vm.ingestReady ? 'btn-primary' : 'btn-danger';
};

$scope.getButtonText = function() {
    return vm.ingestReady ? 'Start Ingest' : 'Cancel Ingest';
};

edited Jun 24 '16 at 20:41

answered Jun 24 '16 at 20:34

Sam

20,096
2
45
71

@AranS looks like he already has it on there, but yes...that is crucial too, for those who stumble upon this question. – Sam Jun 24 '16 at 20:36
@Sam The ng-cloak class didn't work for me, and I already had your second part as a work around, but I was trying to get to the bottom of why both elements are still visible for a brief period of time. – Ben Winks Jun 27 '16 at 12:56
@BenWinks the `ng-cloak` CSS should fix the "both elements being visible" briefly problem. The CSS would need to be loaded before the DOM is rendered, though, so make sure it is in the `head` of your document. If the issue still persists, I'd try using `class="ng-cloak"` instead of an attribute...outside of that, I'm out of guesses. – Sam Jul 05 '16 at 16:03

ng-if shows both elements

2 Answers2