Создание директивы Angularjs вместо тяжелой функции jQuery

Question

У меня есть следующая функция javascript, выполненная в основном из jquery, которую я запускаю, как только загружается страница. Я пытаюсь превратить это в директиву angularjs, но мне трудно понять, как это сделать.

Я новичок в угловом, поэтому любая помощь будет принята с благодарностью.

Единственное не известно переменная PDFWIDTH, но я буду иметь, что в $scope.pdf_width переменной при загрузке шаблона.

Jquery ФУНКЦИЯ

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> 

Так у меня есть основание вниз, чтобы изменить размер элемента, чтобы соответствовать всю ширину и высоту окна. Я пытаюсь найти наиболее подходящий способ сделать это.

Что вы, ребята, думаете? Просто скопируйте материал jquery, который у меня есть, и сделайте его похожим на то, как работает нижеследующая директива? Или вы думаете, что есть лучший javascript/угловой способ сделать это?

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

Answer 1

Ответил на мой вопрос. Если у кого есть предложения, пожалуйста, не стесняйтесь.

Здесь, если кому-то интересно:

JS

.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; 
       var formBox = angular.element($("#formBox")), formScale = angular.element($("#formScale")); 
       scope.formScale = function(pdfwidth) { 
        var percent = formBox.width()/pdfwidth; 
        return { 'width': pdfwidth+'px', 'transform': 'scale(' + percent + ')', '-moz-transform': 'scale(' + percent + ')', '-webkit-transform': 'scale(' + percent + ')', '-ms-transform': 'scale(' + percent + ')' } 
       }; 

       scope.trimSpace = function(pdfwidth) { 
        var percent = formBox.width()/pdfwidth; 
        return { 'width': (pdfwidth * percent)+'px', 'height': (formScale.height() * percent)+'px' } 
       }; 

       scope.formBox = function(pdfwidth) { 
        var percent = formBox.width()/pdfwidth; 
        return { 'height': (formScale.height() * percent)+'px' } 
       } 

      }, true); 
      w.bind('resize', function() { scope.$apply(); }); 
     } 
    }) 

HTML

<div id="formBox" ng-style="formBox(pdf_width)" zoom> 
    <div class="trimSpace" ng-style="trimSpace(pdf_width)" zoom> 
     <div id="formScale" ng-style="formScale(pdf_width)" zoom></div> 
    </div> 
</div>