ngif中的angular自定义指令-设置其绝对儿子的宽度

Question

我有一个自定义的角度指令，有条件地显示它，因为它位于ng-if中。 在我的自定义指令中，我显示html元素，其中之一具有绝对位置。

我想将绝对元素的宽度设置为指令的根宽度。 请注意，我不能将指令根目录的显示设置为相对。

您如何建议我实现这一壮举？

更新：这是一个jsfiddle- http : //jsbin.com/qofolahani/edit?html,css,js,console,output

请注意，在链接函数中，我尚未设置元素的css样式，因此width等于0，这意味着我无法将其设置为child div的宽度。

Answer 1

您的问题是您使用restrict: E 。
浏览器不会将getCalculatedStyle方法绑定到非标准DOM实体。

使用以下命令将此指令更改为属性：

<div my-dir></div> 

和指令：

{
    restrict: 'A',
    link : function (scope, element) {
      element.addClass('my-dir');
      element.find('.my-dir-content').width(element.width());
    },
    template: '<div class="my-dir-content"></div>'
}

---

或者，您应该仅使用内部模板化的div。
replace: false可以帮助解决这个问题。

{
  restrict: 'E',
  link : function (scope, element) {
    var o = element.find('.my-dir');
    var i = o.find('.my-dir-content');
    i.width(o.width());
  },
  replace: false,
  template: '<div class="my-dir"><div class="my-dir-content"></div>/div>'
}

否则，替换父节点：

{
  restrict: 'E',
  link : function (scope, element) {
    var i = element.find('.my-dir-content');
    i.width(element.width());
  },
  replace: true,
  template: '<div class="my-dir"><div class="my-dir-content"></div>/div>'
}

JSBin预览

---

奖金：
您需要这样的代码来更新窗口调整大小的宽度：

  $(window).on('resize', onResize);
  function onResize() {
    i.width(o.width());
  }
  scope.$on('$destroy', function(){
    $(window).off('resize', onResize);
  });

Answer 2

您需要在指令根目录中添加css样式，并将此位置设置为relative ，例如

custom-directive {
   position: relative;
}

将html根元素设置在position：relative上将允许内部html元素在引用指令时占据绝对位置。

然后，您可以将内部html元素设置为

inner-html-element {
    position: absolute;
    width: 100%;
}