AngularJS - div still shows even without condition

Question

Ok, I know that title could use some work, but I'm not sure how else to put it.

Here's the setup.

I have a (potentially) massive table that gets generated via an ng-repeat. All the rows need to be editable but, when the dataset is so large, all those bindings slow things to a crawl. I could literally be waiting upwards of 20 seconds for large sets to load!

We noticed that dumping the data in a read-only state significantly decreased the load time. So, we came up with the idea of loading it read-only, but, when the table row was clicked, it became editable. This is accomplished like so. I have two cells output. editableRow is initially false. When the row is clicked, editableRow becomes true. The idea being that, when editableRow becomes true, I see the other cell.

(proprietary code obfuscated)

                <TABLE-CELL class="value-col" ng-if="readtime.editableRow === true">
                    <input type="text" 
                    name="readingTime"
                    ng-model="<data model>" 
                    ng-disabled="<param>" 
                    ng-change="<function>"
                    ng-class="<classes>"
                    />                                                    
                </TABLE-CELL>
                <TABLE-CELL class="value-col" ng-if="readtime.editableRow === false">
                    <input type="text" 
                    placeholder="{{<data model>}}" 
                    ng-class="<classes>"
                    />                                                    
                </TABLE-CELL>

The problem is, on the click, for a tiny fraction of a second both cells are visible. It really is only visible on the first click. Subsequent clicks still do it, but it goes so fast that the human eye can't catch it. I know it's there since I slowed everything down with a breakpoint on the mouse click. This also revealed that this happens as the value turns true - turning on the first cell, but the second one doesn't disappear in the same moment. So, it causes a "flicker" of sorts. This seems to happen outside my actual code, inside the jQuery, so I'm not sure how to short circuit it.

I've tried playing with using ng-show/hide instead, which worked a little bit, but also totally negated the time-saving aspect, since it actually renders everything, and it took a long time. I've also tried ng-cloak with no effect whatsoever.

The breakpoint that it keeps stopping on (when I told it to stop on event listeners to do with the mouse click) is the following code in jquery.js:

        if ( !(eventHandle = elemData.handle) ) {
        eventHandle = elemData.handle = function( e ) {
            // Discard the second event of a jQuery.event.trigger() and
            // when an event is called after a page has unloaded
            return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
                jQuery.event.dispatch.apply( elem, arguments ) : undefined;
        };
    }

It hits that line about 4 times, and, on the last one, both cells are visible. Then, the second one disappears.

I'm out of ideas and would appreciate any thoughts on this.

score 0 · Answer 1 · answered Nov 26 '21 at 15:16

I finally found an answer that works!

On this page: disable nganimate for some elements the answer right BELOW the accepted answer is what finally worked!

To disable ng-animate for certain elements, using a CSS class, which follows Angular animate paradigm, you can configure ng-animate to test the class using regex.

Config

var myApp = angular.module("MyApp", ["ngAnimate"]);
myApp.config(function($animateProvider) {
    $animateProvider.classNameFilter(/^(?:(?!ng-animate-disabled).)*$/);
})

Usage

Simply add the ng-animate-disabled class to any elements you want to be ignored by ng-animate.

AngularJS - div still shows even without condition

1 Answers1