使用anguarJS返回0内指令

Question

我正试图获得高度自动的div的高度。当我从铬内部用元素检验器查看元素时，它会给出一个高度。

问题是，对于console.log，它返回0。

我试过innerHeight和outerHeight都不起作用。

这是我的代码：

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

Answer 1

您可以将其放入一个$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);
            });
        }
    };
});

Answer 2

在许多情况下，在遇到竞争条件时，您可以利用angular.Element的$timeout调用，而不是尝试一个ready()解决方案。

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