Question

我正在使用ng-repeat创建li的长列表，然后使用angular指令来检查li中是否发生溢出（因为存在最大高度），然后我添加了任何带有溢出的li中的“查看更多”按钮

App.directive('seeMoreDirective', function() {
     return function(scope, element) {
        var ele = angular.element(element);
        ele.ready(function() {
            if ( ele.prop('offsetHeight') < ele.prop('scrollHeight') ) {
                //overflow detected
                console.log('overflow detected');
                ele.addClass('see-more');
                var seeMore = angular.element("<p class='see-more'><a class='see-more'>See More</a></p>");
                element.after(seeMore);
            }
        });
    };

这是一个html代码段：

<li ng-repeat="topic in topicData | orderBy:'+id'" class="well well-sm">
    <div class="col-md-9">
        <div class="clickable" data-idcode={{topic.id}} ng-click="navigate($event)">
            <p>{{topic.title}}</p>
            <div class="topic-desc" see-more-directive>
                <p>{{topic.opening_comment}}</p>
            </div>
        </div> <!--end clickable div-->
    </div> <!--end col-md-9 div-->
</li> <!--end angular loop-->

使用jqLite可以很好地工作。然而，当我在Angular之前链接jQuery时（我已经在我的网站上使用了jQuery，所以我认为我不妨在Angular中使用jQuery）这会中断。

我尝试了一些其他jQuery事件，比如load()，但都没有。唯一有效的方法是将ele.ready()替换为setTimeout()并延迟很长时间。我认为问题是jqLite的.ready()和jQuery的.ready()之间的区别，但我无法弄清楚。有人有什么想法吗？

Answer 1

我能够通过将$timeout传递给指令并将ele.ready()替换为$timeout()来解决此问题。像这样：

App.directive('seeMoreDirective', function( $timeout ) {
    return function(scope, element) {
        var ele = angular.element(element);
        //ele.ready(function() {
        $timeout( function() {
            if ( ele.prop('offsetHeight') < ele.prop('scrollHeight') ) {
                //overflow detected
                console.log('overflow detected');
                ele.addClass('see-more');
                var seeMore = angular.element("<p class='see-more'><a class='see-more'>See More</a></p>");
                element.after(seeMore);
             }
        });
    };
});

我认为差异是$timeout等待浏览器完成呈现ng-repeat元素，其中ele.ready()在DOM元素准备好后触发。在这种情况下，这种差异非常重要，因为我正在使用它们的高度。

在Angular Directive中使用jQuery

1 个答案: