0

我这里发生了一些奇怪的事情。

我得到以下指令： 

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

我将其添加到此代码中： 

<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>

点击这个链接， 

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

它会打开覆盖层“datenschutz”，如上所示（ng-show="datenschutz"）。切换效果很好但是....

当我在页面显示后直接打开 div 时，我看到滚动条正在加载并且看起来很好。有用。
但是，如果我等待片刻，只需几秒钟，然后打开“datenschutz”-overlay，滚动条就不会加载，也根本不会加载。

对于第二个叠加层，我有类似的东西，这也发生了。

编辑/更新：
我发现问题在于，jQuery 无法将脚本应用于隐藏的元素。当我在 ng-repeat 中的 $last 元素（在 div 内部）加载之前快速打开 div 时，它可以工作，因为 div 是可见的。

有谁知道解决方法？

4

1 回答 1

1

解决方案 1（快速而肮脏）：
使用 AngularUI fpr “ui-toggle”指令。它将 ui-hide 或 ui-show 作为类切换到元素中。
后来使用了这个CSS： 

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

在 Chrome 24 和 Firefox 18 中为我工作。

如果有人有其他解决方案，请发布。我的解决方案可能不是最好的。

于 2013-01-15T18:56:03.137 回答