在角度js指令中將CSS樣式應用於div

Question

在我的指令中，我正在處理jqueryui.resizeable，這是一個非常不穩定的問題，並且在Firefox中凍結了很多。 所以我接受了別人的建議，當指令被觸發時，我向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;
}

我已經設置了插件，以更好地說明我遇到的問題： http ://plnkr.co/edit/Ws64rm?p=preview

如果查看源代碼並調整初始div的大小，您將看到添加了一個用於處理實際resize事件的類，然后原始div會在末尾對齊到它。..但從未添加css類。

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)因為如果包含了jQuery，則elem會自動按角度用jQuery包裝，否則包含jQLite。

Answer 2

在jQuery UI中為可調整大小的對象使用helper選項不同於在jQuery UI中為其他API（例如，可拖動）使用helper選項。 此選項希望將簡單的字符串作為類名稱應用到代理對象。

請參閱： http : //api.jqueryui.com/resizable/#option-helper

修改后的代碼是

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

另外請注意，使用angular時，最好將angular.element用作jQuery的偽，因為它已加載到Angular中。 這對於測試目的更好。