Question

我有以下（工作）jQuery函数来检查具有类“.overflow”的元素是否溢出并具有省略号：

 function isOverflowEllipsis() {
    $('.overflow').each(function (){
        var clone = $(this).clone();
        clone.css({"overflow":"visible"});
        clone.addClass("clone");
        clone.appendTo('.atc');
        var cloneScrollWidth = clone.get(0).scrollWidth;
        var cloneClientWidth = clone.get(0).clientWidth;
        $('.clone').remove();       
        if(cloneScrollWidth > cloneClientWidth){
            console.log("true");            
        }
        else {
            console.log("false");   

        }
    });
}

现在我想在AngularJS应用程序中使用此功能。我怎样才能把它变成一个工作指令？我只想使用jqLite。我是自定义指令的新手，我无法让它工作; - （

这是我不成功的尝试：

 app.directive("isOverflowEllipsis", function () {
    return {
        restrict: "EA",
        link: function(scope, elem, attrs) {          
                var clone = elem.clone();
                clone.css({"overflow":"visible"});
                clone.addClass("clone");
                clone.append('.overflow');
                var cloneScrollWidth = clone.scrollWidth;
                var cloneClientWidth = clone.clientWidth;
                $('.clone').removeClass();      
                if(cloneScrollWidth > cloneClientWidth){
                    console.log("true");            
                }
                else {
                    console.log("false");                   
                }           
        }
    };
});

编辑：在jQuery中，该函数位于$(document).ready(function(){...}和$(window).resize(function() {...}之内。我如何在指令中执行此操作？

Answer 1

 link: function(scope, elem, attrs) {          
            var clone = angular.copy(elem);
            attrs.overflow="visible";
            clone .addClass("clone");
            clone .append('.overflow');
            var cloneScrollWidth = attrs.scrollWidth;
            var cloneClientWidth = attrs.clientWidth;
            elem.removeClass('clone');      
            if(cloneScrollWidth > cloneClientWidth){
                console.log("true");            
            }
            else {
                console.log("false");                   
            }           
    }

将jquery函数转换为angular-directive

1 个答案: