Javascript height在带有anguarJS的指令内返回0

我正在尝试使用高度自动获取div的高度。 当我从chrome中使用element inspector查看元素时，它给出了一个高度

问题是console.log返回0

我试过内高和外高都不行

这是我的密码：

var vAlign = angular.module("vAlign", [])
.directive('vAlign', function() {
    return {
        restrict : "AC",
        link: function(scope, e){

            var elementHeight = e.height();
            var parentHeight = e.parent().height();
            var finalHeight = parentHeight - elementHeight /2;

            e.css('marginTop', finalHeight);

            console.log(elementHeight);
        }
    };
});

---

您可以将其放入

$timeout

中，它将运行后期渲染：

var vAlign = angular.module("vAlign", [])
  .directive('vAlign', function($timeout) {
    return {
        restrict : "AC",
        link: function(scope, e){
            $timeout(function() {
              var elementHeight = e.height();
              var parentHeight = e.parent().height();
              var finalHeight = parentHeight - elementHeight /2;

              e.css('marginTop', finalHeight);

              console.log(elementHeight);
            });
        }
    };
});

---

您可以将其放入

$timeout

中，它将运行后期渲染：

var vAlign = angular.module("vAlign", [])
  .directive('vAlign', function($timeout) {
    return {
        restrict : "AC",
        link: function(scope, e){
            $timeout(function() {
              var elementHeight = e.height();
              var parentHeight = e.parent().height();
              var finalHeight = parentHeight - elementHeight /2;

              e.css('marginTop', finalHeight);

              console.log(elementHeight);
            });
        }
    };
});

---

在许多情况下，如果您遇到竞争条件，而不是尝试

$timeout

解决方案，您可以利用angular.element的

ready（）

调用

#coffeescript
.directive 'vAlign', ->
   dir = 
      link: ($scope, elem, attrs)->
         elem.ready( /*insert function here*/ )

---

在许多情况下，如果您遇到竞争条件，而不是尝试

$timeout

解决方案，您可以利用angular.element的

ready（）

调用

#coffeescript
.directive 'vAlign', ->
   dir = 
      link: ($scope, elem, attrs)->
         elem.ready( /*insert function here*/ )

---

---

我的猜测是，无论是什么，它的高度到那个时候还没有达到，我也是这么想的。只是找不到解决方案..我从来没有弄乱过它，但是，有没有一些优先级系统，你可以利用指令？我想知道让你的指令最后被解析是否会有帮助。我对angularjs是个新手。我正在阅读angularjs关于scope apply和watch的文档，这可能会有所帮助。是什么赋予了div它的高度？图像？静态文本？范围属性中的文本？我猜无论是什么，它的高度到那个时间点还没有达到。我也是这么想的。只是找不到解决方案..我从来没有弄乱过它，但是，有没有一些优先级系统，你可以利用指令？我想知道让你的指令最后被解析是否会有帮助。我对angularjs是个新手。我正在阅读angularjs关于scope apply和watch的文档，这可能会有所帮助。是什么赋予了div它的高度？图像？静态文本？作用域属性中的文本？不是因为省略了编译定义，只提供了链接函数，作为后期链接函数吗？-进一步研究后，你是对的-我猜$timeout可能是确保发生某些事情的最佳方法“后期渲染”你在$timeout中执行任何与作用域相关的工作，因此，您可以只使用setTimeout，并保存一个摘要周期。这不是因为省去了编译定义，只提供了作为后期链接函数的链接函数吗？-进一步研究后，您是对的-我猜$timeout可能是确保“后期渲染”发生某些事情的最佳方法您正在$timeout中执行任何与范围相关的工作，因此您可以使用setTimeout，并保存一个摘要周期。嗯。。我试过你的密码。它似乎仍然返回0。哦，没关系，它也能工作，但有一个输入错误。。（facepalm）我会坚持使用

$timeout

解决方案。或者，如果您真的想变得有趣，假设

elem

中的内容可能会更改，您可以设置

$scope.$watch alwaysRunFunc

类型方法。缺点是性能不太好。我现在正在使用e.ready。当我变得更高级时，如果需要的话，我会尝试使用你的奇特方法。非常感谢！隐马尔可夫模型。。我试过你的密码。它似乎仍然返回0。哦，没关系，它也能工作，但有一个输入错误。。（facepalm）我会坚持使用

$timeout

解决方案。或者，如果您真的想变得有趣，假设

elem

中的内容可能会更改，您可以设置

$scope.$watch alwaysRunFunc

类型方法。缺点是性能不太好。我现在正在使用e.ready。当我变得更高级时，如果需要的话，我会尝试使用你的奇特方法。非常感谢！