Angularjs - Jquery loading

Question

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?

Marek123 · Accepted Answer · 2013-01-15 18:56:03Z

1

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.

answered Jan 15, 2013 at 18:56

Marek123

1,2217 gold badges39 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jay Over a year ago

I've had a similar problem with display:none and setting it to visible is the only way I could get what I needed done as well and made a directive similar to yours. Feel free to mark your answer as accepted and change it later on if another better answer comes along.

Collectives™ on Stack Overflow

Angularjs - Jquery loading

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related