AngularJS指令中的元素高度
Posted
技术标签:
【中文标题】AngularJS指令中的元素高度【英文标题】：Element height from within an AngularJS directive 【发布时间】：2015-03-09 19:00:58 【问题描述】：我正在尝试在一个简单的 AngularJS 应用程序中获取元素的高度。 见下文。我究竟做错了什么？换行时高度应该不同，但无论我在“标签”数组中输入什么，我都会收到 20 个报告给我。
下面的代码可以在这里执行，否则见下文。 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>
【问题讨论】：
【参考方案1】：确保获得元素高度的另一种方法是使用 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);
);
)
因为你使用::，所以只会触发一次。
【讨论】：
【参考方案2】：您需要等到下一个摘要周期。当您在指令中立即执行此操作时，ng-repeat 内的插值 ::lbl 还不会扩展。您可以将其放在 $timeout 中关闭 applyDigest 参数。
例如：
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());
);
Plnkr
【讨论】：
$timeout 很关键！我不明白为什么高度和我看到的有这么大的不同。以上是关于AngularJS指令中的元素高度的主要内容，如果未能解决你的问题，请参考以下文章