[英]Custom Angular directive to dynamically change font size?
I have some content on my site that doesn't format well because different browsers/screens render the font-size a little differently. 我的网站上的某些内容格式不正确,因为不同的浏览器/屏幕呈现的字体大小略有不同。 To counteract this, I'm attempting to use Angular to get the height of some <p>
tags, and if they're taller than my layout allows, lower their font size. 为了解决这个问题,我尝试使用Angular来获取某些<p>
标签的高度,如果它们比我的布局允许的高度高,请减小其字体大小。
The <p>
tags I'm trying to manipulate are contained in a directive which generates multiple content boxes based on some JSON. 我尝试操作的<p>
标记包含在一个指令中,该指令基于某些JSON生成多个内容框。
I have created this directive: 我创建了以下指令:
spaModule.directive ("resizeParagraph", function() {
return function (scope, element, attrs) {
while (element.height() > 400) {
element.css("font-size", (parseInt(element.css("font-size")) -1 + "px"));
}
}
});
This is the directive which creates those boxes (this works): 这是创建这些框的指令(有效):
<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>
I'm at home creating custom directives with a source URL, but this is my first go at creating a logical attribute-based directive. 我在家创建带有源URL的自定义指令,但这是我第一次创建基于逻辑属性的指令。
What have I done wrong? 我做错了什么?
Try adding jQuery , before loading angular.js. 尝试在加载angular.js之前添加jQuery 。 In this post, it is written that Angular is using its own library jqLite to substitute for jQuery when the jQuery library is not included. 在这篇文章中,当不包含jQuery库时,Angular使用自己的库jqLite替代了jQuery。 jqLite does not include a height()
function. jqLite不包含height()
函数。 To be able to use height(), you have to include the full jQuery library. 为了能够使用height(),您必须包括完整的jQuery库。
Just add <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
before the line where you include angular.js. 只需在包含angular.js的行之前添加<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
。
I tested it with the following code: 我用以下代码对其进行了测试:
<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>
EDIT 编辑
After some testing, I found the reason why it is not working as expected. 经过一些测试,我找到了无法按预期运行的原因。 The function inside the directive is called, before the expression {{data.body}}
is executed in the template. 在模板中执行表达式{{data.body}}
之前,将调用伪指令中的函数。 It means that at the moment the directive is called, the text inside the paragraph is literally {{data.body}}
. 这意味着在调用指令的那一刻,段落内的文本实际上是{{data.body}}
。 What you want is to postpone the execution of the directive after the expression has been executed. 您要执行的是表达式执行后推迟指令的执行。 You can do it as follows: 您可以按照以下步骤进行操作:
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"));
}
})
}
});
I can also confirm that element.height() and element.context.offsetHeight return the same value. 我还可以确认element.height()和element.context.offsetHeight返回相同的值。 The height of the element in px. 元素的高度(以px为单位)。 So, it doesn't matter which of the two you'll use. 因此,您将使用这两者中的哪一个都没有关系。
I hope this helps. 我希望这有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.