我的网站上有一些内容格式不佳,因为不同的浏览器/屏幕呈现的字体大小略有不同。为了解决这个问题,我尝试使用 Angular 来获取一些 <p>
的高度标签,如果它们比我的布局允许的高度,请减小它们的字体大小。
<p>
我尝试操作的标签包含在一个指令中,该指令根据某些 JSON 生成多个内容框。
我创建了这个指令:
spaModule.directive ("resizeParagraph", function() {
return function (scope, element, attrs) {
while (element.height() > 400) {
element.css("font-size", (parseInt(element.css("font-size")) -1 + "px"));
}
}
});
这是创建这些框的指令(有效):
<div ng-repeat="data in homeCtrl.homeData" class="content-box">
<img class="content-image" ng-src="images/home/{{ data.imageSrc }}"/>
<div class="sub-content">
<h1>
{{ data.heading }}
</h1>
<p resize-paragraph class="large-text">
{{ data.body }}
</p>
<a ng-href="#/{{ data.linkUrl }}" class="box-link">
{{ data.linkValue }}
</a>
</div>
</div>
我正在家里使用源 URL 创建自定义指令,但这是我第一次尝试创建基于逻辑属性的指令。
我做错了什么?
最佳答案
尝试添加 jQuery ,在加载 angular.js 之前。在 this帖子中写道,当不包含 jQuery 库时,Angular 正在使用自己的库 jqLite 来替代 jQuery。 jqLite 不包括 height()
功能。为了能够使用 height(),您必须包含完整的 jQuery 库。
只需添加 <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
在包含 angular.js 的行之前。
我使用以下代码对其进行了测试:
<style type="text/css">
.large-text {
font-size: 600px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="angular.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.homeCtrl = {};
$scope.homeCtrl.homeData = [
{
heading: 'Heading',
body: 'Body',
linkValue: 'LinkValue'
}
];
});
app.directive("resizeParagraph", function() {
return function (scope, element, attrs) {
while (element.height() > 100) {
element.css("font-size", (parseInt(element.css("font-size")) -1 + "px"));
}
}
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="data in homeCtrl.homeData" class="content-box">
<img class="content-image" ng-src="images/home/{{ data.imageSrc }}"/>
<div class="sub-content">
<h1>
{{ data.heading }}
</h1>
<p resize-paragraph class="large-text">
{{ data.body }}
</p>
<a ng-href="#/{{ data.linkUrl }}" class="box-link">
{{ data.linkValue }}
</a>
</div>
</div>
</div>
编辑
经过一些测试,我找到了它没有按预期工作的原因。指令内的函数在表达式 {{data.body}}
之前被调用。在模板中执行。这意味着在调用指令时,段落内的文本字面意思是 {{data.body}}
。您想要的是在执行表达式后推迟指令的执行。您可以按如下方式进行:
app.directive("resizeParagraph", function() {
return function (scope, element, attrs) {
scope.$watch(name, function () {
while (element.height() > 50) {
element.css("font-size", (parseInt(element.css("font-size")) -1 + "px"));
}
})
}
});
我还可以确认 element.height() 和 element.context.offsetHeight 返回相同的值。元素的高度(以 px 为单位)。因此,您使用两者中的哪一个并不重要。
我希望这会有所帮助。
关于javascript - 自定义 Angular 指令来动态更改字体大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32060577/