javascript - 创建 Angularjs 指令而不是 jQuery 重函数

Question

我有以下 javascript 函数，主要由我在页面加载后立即运行的 jquery 制作。我试图将它变成一个 angularjs 指令，但我无法弄清楚如何完成它。

我是 Angular 的新手，所以非常感谢任何帮助。

唯一未知变量是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/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(); });
    }
})

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>