I have a javascript function, mainly utilizing jquery, that I currently run when the page loads. My goal is to convert this into an angularjs directive, but I am facing difficulties in figuring out how to achieve it.
As someone new to angular, any assistance would be immensely appreciated.
The only variable that remains unknown is PDFWIDTH, which will be stored in a $scope.pdf_width variable upon template load.
JQUERY FUNCTION
function zoomProject() {
var maxWidth = $("#formBox").width(), percent = maxWidth / PDFWIDTH;
$("#formScale").css({
'transform': 'scale(' + percent + ')',
'-moz-transform': 'scale(' + percent + ')',
'-webkit-transform': 'scale(' + percent + ')',
'-ms-transform': 'scale(' + percent + ')'
});
$(".trimSpace").css('width', (PDFWIDTH * percent) + 'px');
$("#formBox, .trimSpace").css('height', ($("#formScale").height() * percent) + 'px');
}
HTML
<div id="formBox">
<div class="trimSpace">
<div id="formScale"></div>
</div>
</div>
Currently, I have laid the foundation for resizing an element to fit the entire window width and height. I am exploring the most suitable approach to accomplish this task.
What are your thoughts? Should I simply replicate the jquery functionality above and integrate it similarly to the directive below? Or do you believe there exists a better way in terms of leveraging javascript/angular?
.directive('zoom', function ($window) {
return function (scope, element) {
var w = angular.element($window);
scope.getWindowDimensions = function () { return { 'h': w.height(), 'w': w.width() }; };
scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {
scope.windowHeight = newValue.h;
scope.windowWidth = newValue.w;
scope.style = function (amount) { return { 'height': (newValue.h - amount) + 'px', 'width': (newValue.w - amount) + 'px' }; };
}, true);
w.bind('resize', function () { scope.$apply(); });
}
})