在AngularJS中获取没有JQuery的多个元素的高度答案

【问题标题】：Get Height for multiple elements without JQuery in AngularJS在AngularJS中获取没有JQuery的多个元素的高度
【发布时间】：2016-07-12 07:22:39
【问题描述】：

对 Angular 来说还很陌生，但我仍在努力思考一些事情。我需要在仪表板上获取多个项目的高度。我看过这个答案： Get HTML Element Height without JQuery in AngularJS 但是，我不知道如何让它适用于多个项目。当然，我不需要为每个元素编写单独的指令。所以玩这个Plunker，我将html更改为下面，但两个元素的值相同。

嗯

script.js:

angular.module('myModule', [])
  .directive('myDirective', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element) {
            scope.height = element.prop('offsetHeight');
            scope.width = element.prop('offsetWidth');
        }
    };
  })
;

和html：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myModule">

    <h1 my-directive>Hello Plunker! width: {{width}}, height: {{height}}
    </h1>
    <h3 my-directive>Smaller Hello Plunker! width: {{width}}, height: {{height}}
    </h3>
  </body>

</html>

【问题讨论】：

当我将您的 HTML 放入 Plunker 时，控制台给了我不同的高度。 (37 & 22)
抱歉：链接到错误的插件：刚刚编辑到正确的插件。我试图弄清楚为什么绑定是相同的
啊，我现在明白了。是的，如果您打开开发工具，它也会将 h1 和 h3 显示为相同的确切高度，所以我认为错误出在您的指令设置中。您也应该发布该代码。
script.js中已经在上面的Plunker中了
应该还是在这里提供代码，所以将来如果 Plunker 不存在，人们仍然可以使用你的问题来帮助他们

标签： javascript html angularjs

【解决方案1】：

指令没有作用域，因此它们将值存储在$rootScope 上。这些值反映了要执行的最后一个指令的高度和宽度。修正您的指令以使用 inherited 范围或 隔离范围。

angular.module('myModule', [])
  .directive('myDirective', function($timeout) {
    return {
        restrict: 'A',
        //set scope to inherited
        scope: true,
        //OR use isolate scope
        //scope: {},
        link: function(scope, element) {
            scope.height = element.prop('offsetHeight');
            scope.width = element.prop('offsetWidth');
        }
    };
  })
;

通过设置 scope 属性，$compile 服务将为指令创建一个新范围（inherited 或 isolate）以存储对指令。

有关指令范围的更多信息，请参阅AngularJS Comprehensive Directive API -- scope。

【讨论】：

【解决方案2】：

我发现这个脚本很有帮助

https://github.com/pocesar/angular-track-height

【讨论】：