Question

我在指令的链接器中有以下内容....

pre: function preLink($scope, e) {
    var element = d3.select(e[0]);
    var height = element.node().parentNode.clientHeight;
    element
      .style({
        "border": "7px solid black",
        "min-height": height+"px",
        "background-image" : "url('http://s3.amazonaws.com/dostuff-production/property_assets/23107/yellow-stripes.png')"
      });
      element.select(".board")
                    .style("transform", function(d){
                        var ch = d3.select(this).node().clientHeight;
                        return "translate("+0+"px, "+(height/2-ch/2)+"px)"
                    })
}

然后在我的代码中我有

<jg-body ng-cloak>

由于ng-cloak，问题是element.node().parentNode.clientHeight;为0。有没有办法推迟链接功能，直到删除ng-cloak？

更新

根据反馈我尝试了这个......

compile: function compile() {
        return {
            pre: function preLink($scope, e) {
                var element = d3.select(e[0]);
                $timeout(function() {
                    var height = element.node().parentNode.clientHeight;
                    element
                        .style({
                            "border": "7px solid black",
                            "min-height": height + "px",
                            "background-image": "url('http://s3.amazonaws.com/dostuff-production/property_assets/23107/yellow-stripes.png')"
                        });
                    element.select(".board")
                        .style("transform", function (d) {
                            var ch = d3.select(this).node().clientHeight;
                            return "translate(" + 0 + "px, " + (height / 2 - ch / 2) + "px)"
                        })
                })
            }
        }
  }

但是，var height = element.node().parentNode.clientHeight;仍为0，删除ng-cloak会修复它。我创建了一个示例plnker here

Answer 1

$ timeout或其他什么工作？

是的，它应该。另请注意，您正在检查在编译指令之前运行的pre链接内的高度。在编译之前，它将没有内容

您应该将代码移至post链接，并可能使用$timeout，具体取决于jg-body模板的作用。此外，如果它依赖异步数据进行渲染，然后获得高度，则还有另一个需要处理的问题，需要更多代码才能进行整理

当`ng-cloak`处于活动状态时，如何获取父元素的clientHeight

1 个答案: