apply css style to a div within an angular js directive

Question

In my directive I am handling jqueryui.resizeable I was having an issue where it was very jittery and froze ALOT in firefox. So i took someones suggestion and when the directive was triggered I added a div to the DOM ... resized that ... and at the end I snapped the original div to the one i added then get rid of the added div.

This actually completely took care of my jitter issue. The only problem is that during the resize event it should be adding a class to the added div which will make it visible on the screen while resizing .... but that class is not added.

My directive is as follows:

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;
        }
    };
});

The css class i wish to add is:

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

I have setup a plunker to better illustrate the issue im having: http://plnkr.co/edit/Ws64rm?p=preview

If you view source and resize the initial div you will see a class get added that deals with the actual resize event then the original div is snapped to it at the end .... but the css class is never added.

Joel Jeske · Accepted Answer · 2014-04-25 21:50:46Z

2

Using the helper option in jQuery UI for a resizable object is different than the helper option for other APIs in jQuery UI (e.g. draggable). This option expects a simple string to be applied as a class name to the proxy object.

See: http://api.jqueryui.com/resizable/#option-helper

The modified code would be,

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

Also as a side note, when using angular, it is better to use angular.element as a pseudo for jQuery as it gets loaded into Angular. This is better for testing purposes.

answered Apr 25, 2014 at 21:50

Joel Jeske

1,64714 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jshanley Over a year ago

Ah, I see I was solving a real, but irrelevant, issue with my answer. You nailed it. +1 for solving the root of the issue.

Deslyxia Over a year ago

Perfect ... but +1 to you as well jshanley because i see where you were going as well.

jshanley · Accepted Answer · 2014-04-25 21:52:11Z

2

It's unclear to me whether you are trying to select an existing div or create it, but either way, the syntax is incorrect.

To select an existing div you would do:

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

To append a new div, you would do:

// 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()
});

There is no need to wrap the element as jQuery(this) because elem is automatically jQuery-wrapped for you by angular if you have included jQuery, or with jQLite otherwise.

edited Apr 25, 2014 at 21:52

answered Apr 25, 2014 at 21:47

jshanley

9,1382 gold badges39 silver badges45 bronze badges

Collectives™ on Stack Overflow

apply css style to a div within an angular js directive

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related