Javascript 在AngularJS中获取没有JQuery的多个元素的高度_Javascript_Html_Angularjs

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

javascript html angularjs

Javascript 在AngularJS中获取没有JQuery的多个元素的高度,javascript,html,angularjs,Javascript,Html,Angularjs,对Angular来说，这是一个相当新的概念，但我仍在努力解决一些问题。我需要获得仪表板上多个项目的高度。我看到了这个答案：但是，我无法解决如何让它在多个项目中工作。当然，我不需要为每个元素编写单独的指令。因此，我将html改为如下，但两个元素的值相同嗯 script.js： angular.module('myModule', []) .directive('myDirective', function($timeout) { return { restric

对Angular来说，这是一个相当新的概念，但我仍在努力解决一些问题。我需要获得仪表板上多个项目的高度。我看到了这个答案：但是，我无法解决如何让它在多个项目中工作。当然，我不需要为每个元素编写单独的指令。因此，我将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>


你好，普朗克！宽度：{{width}，高度：{{height}
你好，普朗克！宽度：{{width}，高度：{{height}

指令没有作用域，因此它们将值存储在

$rootScope

上。这些值反映要执行的最后一个指令的高度和宽度。修正指令以使用继承的作用域或隔离作用域

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');
        }
    };
  })
;

通过设置

范围

属性，

$compile

服务将为指令创建一个新范围（继承的或隔离的），以存储该指令特有的值

有关指令作用域的详细信息，请参阅。

指令没有作用域，因此它们将值存储在

$rootScope

上。这些值反映要执行的最后一个指令的高度和宽度。修正指令以使用继承的作用域或隔离作用域

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');
        }
    };
  })
;

通过设置

范围

属性，

$compile

服务将为指令创建一个新范围（继承的或隔离的），以存储该指令特有的值

有关指令作用域的更多信息，请参阅。

我发现此脚本非常有用

我发现这个脚本非常有用

当我将您的HTML放入Plunker时，控制台给了我不同的高度。（37和22）抱歉：链接到错误的plunker:刚刚编辑到正确的plunker。我正试图弄明白为什么绑定是相同的。是的，如果你打开dev工具，它会显示h1和h3同样的高度，所以我认为错误在你的指令设置中。你也应该发布这些代码。它已经在上面的Plunker脚本中。js应该仍然在这里提供代码，因此将来如果Plunker不存在，人们仍然可以使用你的问题来帮助他们。当我将你的HTML放入Plunker时，控制台给了我不同的高度。（37和22）抱歉：链接到错误的plunker:刚刚编辑到正确的plunker。我正试图弄明白为什么绑定是相同的。是的，如果你打开dev工具，它会显示h1和h3同样的高度，所以我认为错误在你的指令设置中。你也应该发布代码。它已经在上面脚本中的Plunker中了。jsp应该仍然在这里提供代码，所以将来如果Plunker不存在，人们仍然可以使用你的问题来帮助他们