創建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>