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

Question

在我的指令中，我正在处理jqueryui.rescale。我遇到了一个问题，它非常不稳定，并在firefox中冻结了ALOT。所以我接受了一些人的建议，当指令被触发时，我在DOM中添加了一个div。。。调整了大小。。。最后，我将原来的div与我添加的div对齐，然后去掉添加的div

这实际上完全解决了我的抖动问题。唯一的问题是，在调整大小事件期间，它应该向添加的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的大小，您将看到添加了一个处理实际调整大小事件的类，然后在末尾将原始div捕捉到它。。。。但是css类从未被添加。

Answer 1

在jQuery UI中为可调整大小的对象使用helper选项与在jQuery用户界面中为其他API（例如可拖动）使用助手选项不同。此选项要求将一个简单字符串作为类名应用于代理对象。

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

修改后的代码为

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

同样需要注意的是，当使用angular时，最好在jQuery加载到angular时使用angular.element作为它的伪。这更适合测试目的。

Answer 2

我不清楚您是在尝试选择现有的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)，因为如果您包含了jQuery，elem会自动通过angular进行jQuery包装，否则会通过jQLite进行包装。