Question

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

我想将绝对元素的宽度设置为指令根宽度的宽度。请注意，我无法将指令root的显示设置为相对。

你如何建议我实现这样的壮举？

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

请注意，在链接函数中我还没有元素的css样式，因此宽度等于0，这意味着我无法在子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 Preview

<强>加成：
你需要这样的代码来更新窗口调整大小的宽度：

  $(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;
}

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

然后你可以使用内部html元素并设置

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

ngif中的angular custom directive - 设置其绝对子宽度

2 个答案: