我有以下 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(); });
}
})
最佳答案
回答了我自己的问题。如果有人有任何建议,请不要犹豫。
有兴趣的可以看一下
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>
关于javascript - 创建 Angularjs 指令而不是 jQuery 重函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30721136/