Question

在我的指令中，我正在处理jqueryui.resizeable我遇到了一个问题，它非常紧张，并在Firefox中冻结了ALOT。因此我接受了某人的建议，当指令被触发时，我在DOM中添加了一个div ...调整了大小...最后我将原始div捕捉到我添加的那个然后摆脱添加的div。

这实际上完全解决了我的抖动问题。唯一的问题是，在resize事件期间，它应该为添加的div添加一个类，这将使它在调整大小时在屏幕上可见....但是不添加该类。

我的指示如下：

directive('resizable', function() {
    return {

    restrict: 'A',
    scope: {
        callback: '&onResize'
    },
    link: function postLink(scope, elem, attrs) {
        elem.resizable({
          helper: function() {
            return (jQuery("<div>").css({
              height: jQuery(this).height(),
              width: jQuery(this).width()
          }).addClass('resizeHelper'));    
        }

        });

        elem.on('resizestop', function (evt, ui) {
            if (scope.callback) { scope.callback(); }
        });
            window.e = elem;
        }
    };
});

我希望添加的css类是：

.resizeHelper {
    border: 2px dashed #cccccc;    
    background: black;
    opacity: 0.2;
}

我已经设置了一个plunker来更好地说明我遇到的问题：http://plnkr.co/edit/Ws64rm?p=preview

如果您查看源并调整初始div的大小，您将看到添加了一个类来处理实际的resize事件，然后在末尾将原始div捕捉到它....但是从不添加css类。 / p>

Answer 1

我不清楚您是在尝试选择现有div还是创建它，但不管怎样，语法都不正确。

要选择现有的div：

// notice, no angle brackets around 'div'
jQuery('div').css({
  height: elem.height(),
  width: elem.width()
}).addClass('resizeHelper'));

要附加新的div，您可以这样做：

// append opening and closing tag, adding class
elem.append('<div class="resizeHelper"></div>');
// then select the element you just made and apply the css
elem.find('.resizeHelper').css({
  height: elem.height(),
  width: elem.width()
});

没有必要将元素包装为jQuery(this)，因为elem会自动为jQuery包装，如果你包含jQuery，或者使用jQLite。

Answer 2

在jQuery UI中使用helper选项可调整大小的对象与jQuery UI中其他API的帮助选项（例如draggable）不同。此选项需要将简单字符串作为类名应用于代理对象。

请参阅：http://api.jqueryui.com/resizable/#option-helper

修改后的代码是，

elem.resizable({ helper:'resizeHelper' });

另外作为旁注，当使用angular时，最好使用angular.element作为jQuery的伪，因为它被加载到Angular中。这更适合测试目的。

将css样式应用于角度js指令中的div

2 个答案: