在 Angular 指令中使用 jQuery

Question

我正在使用 ng-repeat 制作一长串 li 然后使用 angular 指令检查 li 中是否发生溢出（因为有一个 max-height )，然后我在任何 li 中添加一个 'See More' 按钮并溢出

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 之前 link jQuery 时（我已经在我的网站上使用 jQuery，所以我想我也可以在 Angular) 这会中断。

我尝试了其他一些 jQuery 事件，例如 load()，但其中 none 成功了。唯一有用的是当我用 setTimeout() 替换 ele.ready() 并延迟很长时间时。我认为问题在于 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 指令中使用 jQuery

Using jQuery inside an Angular Directive

jquery

angularjs

angularjs-directive