AngularJS指令中的元素高度
[英]Element height from within an AngularJS directive
问题描述
I'm trying to get the height of elements in a simple AngularJS app. 
我想在一个简单的AngularJS应用程序中获取元素的高度。 See below. 见下文。 What am I doing wrong? 我究竟做错了什么？ The height should be different as the lines wrap, but I get 20 reported back to me regardless of what I input in the "labels" array. 线条包裹时高度应该不同，但无论我在“标签”数组中输入什么，我都会向我报告20。
The following code can be executed here, otherwise see below. 可以在此处执行以下代码，否则请参见下文。 http://js.do/code/49177 http://js.do/code/49177
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
<title>height of element in angularjs</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
'use strict';
var app = angular.module('heightApp', ['ngRoute', 'routing']);
app.controller('heightCtrl', ['$scope', function ($scope) {
$scope.labels = [
'Hi there, I\'m a div.',
'Me too, I\'m also a div.',
'Can you see me, because I certainly can\'t see myself. I don\'t even know my own height. Isn\'t that just crazy?'
];
}]);
angular.module('routing', []).config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'height.html',
controller: 'heightCtrl'
});
}]);
angular.module('heightApp').directive('reportMyHeight', function() {
return function (scope, el, attrs) {
alert('offsetHeight = ' + el[0].offsetHeight);
}
})
</script>
</head>
<body ng-app="heightApp">
<div class="container">
<div ng-view></div>
</div>
</body>
<script type="text/ng-template" id="height.html">
<div class="row">
<div class="col-sm-4" report-my-height ng-repeat="lbl in labels">
{{ ::lbl }}
</div>
</div>
</script>
</html>
2 个解决方案
解决方案1
8 已采纳 2015-01-12 03:17:59
You need to wait till the next digest cycle. 你需要等到下一个摘要周期。 When you do it right away in the directive the interpolations {{ ::lbl }} inside the ng-repeat would not have expanded yet. 当您在指令中立即执行此操作时，ng-repeat内的插值{{ ::lbl }}将不会扩展。 You can place it in a $timeout turning off the applyDigest argument. 您可以将其置于$timeout ，关闭applyDigest参数。
ie, example: 即，例如：
angular.module('heightApp').directive('reportMyHeight', function($timeout) {
return function (scope, el, attrs) {
$timeout(init, false);
//Initialization
function init(){
console.log('offsetHeight = ' + el[0].offsetHeight, el.html());
}
}
});
解决方案2
1 2015-01-12 03:26:36
Another way to make sure you get the height of the element is to use watch. 另一种确保获得元素高度的方法是使用手表。
angular.module('heightApp').directive('reportMyHeight', function($timeout) {
return function (scope, el, attrs) {
scope.$watch('lbl', function(newval, oldval){
alert(newval + '\n\n' + 'offsetHeight = ' + el[0].offsetHeight);
});
}
})
It will only be triggered once since you use :: . 它只会在你使用::被触发一次。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.