-
Notifications
You must be signed in to change notification settings - Fork 115
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dynamic directions values #29
Comments
FWIW, I came up with this: return {
restrict: 'AE',
scope: {
rDirections: '@',
// ...
},
link: function(scope, element, attr) {
// ...
scope.$watch("rDirections", function(directions) {
if(typeof directions === 'string') {
dir = directions.split(',');
}
var oldGrabbers = element[0].querySelectorAll('[class^="rg-"]');
var l = oldGrabbers.length;
for (i = 0; i < l; ++i) {
var grabber = oldGrabbers[i];
grabber.parentNode.removeChild(grabber)
}
dir.forEach(function (direction) {
var grabber = document.createElement('div');
// add class for styling purposes
grabber.setAttribute('class', 'rg-' + direction);
grabber.innerHTML = inner;
element[0].appendChild(grabber);
grabber.ondragstart = function() { return false; };
grabber.addEventListener('mousedown', function(e) {
var disabled = (scope.rDisabled === 'true');
if (!disabled && e.which === 1) {
// left mouse click
dragStart(e, direction);
}
}, false);
});
});
}
};
}); Which allows me to use this in the template: |
+1 |
Hey @jedfoster ! Nice work :). Based on your concept, I built out a codepen that I think demonstrates what you're requesting. Take a look and let me know what you think! To toggle the resize directions, just click on the checkboxes in the upper left. |
That codepen looks good to me. Thanks! |
I've got angular-resizable working very well on my app, thank you! Now I'm trying to wire it up to user preferences; e.g. a user can change the orientation of resizable panels on the page.
Using this,
r-directions="[(preferences.orientation === 'vertical' ? 'bottom' : 'right')]"
, I am able to set the orientation correctly on the initial page load (preferences
is an object stored inlocalStorage
), but I don't see a way to make angular-resizable respond to changes to that scope property after the initial load. Is there a way to make angular-resizable re-render itself?Thanks!
The text was updated successfully, but these errors were encountered: