CODEWITHSUNDEEP
javascriptjqueryangularjsloading
Marek123
Marek123

Reputation: 1211

Angularjs - Jquery loading

I have somesthing strange happen here.

I got the following directive: 

app.directive('addscroller', function () {
        return function (scope, elm, attrs) {
                // jQuery Script triggern
                // AngularJS: jQuery(selector) = element. 
                    elm.ready(function () {
                        elm.nanoScroller({ alwaysVisible: true });     
                    })       
        }
    });

I'm adding it to this code: 

<div ng-show="datenschutz" class="alldealermodal">  
    <p ng-show="loading">Loading...</p>
    <div>  
        <h1 class="headline">DATENSCHUTZ</h1>
        <div class="closebtndiv"><a href="#" ng-click="datenschutz=false" class="closebutton">Close</a></div>
        <div class="clear"></div>
        <div class="nano" addscroller>  
        <div class="content"><p>BIG LONG TEXT</p></div> 
        </div>
     </div>
     <div class="fadeout"></div>
</div>

On click on this link, 

<p><a href="#"  ng-click="datenschutz=!datenschutz" class="datenschutz">Datenschutz</a></p>

it opens the overlay "datenschutz" as seen above (ng-show="datenschutz"). The toggle works great BUT....

When I directly open the div after the page shown up, I see the scroller loading and appearing fine. It works.
But If I wait some moments, just a few seconds and then I open the "datenschutz"-overlay, the scroller isn't loaded and doesn't load at all.

I have something similar for a second overlay and this happens too.

EDIT / UPDATE:
I figured out, that the problem is, that jQuery cannot apply the script to an element which is hidden. When I quickly open the div before the $last element in the ng-repeat (inside the div) has loaded, it works, because the div is visible.

Does anyone know a workaround for that?

Upvotes: 0

Views: 629

Answers (1)

Marek123
Marek123

Reputation: 1211

Solution 1 (Quick and Dirty):
Used AngularUI fpr the "ui-toggle" directive. It toggles ui-hide or ui-show as class into the element.
Afterwards used this CSS: 

.ui-show {opacity:1;visibility: visible;}
.ui-hide {opacity:0;visibility: hidden;}

Worked for me in Chrome 24 and Firefox 18.

If someone got some other solutions, please post. My solution is maybe not the best one.

Upvotes: 1

Related Questions