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

Question

我有一个自定义的 Angular Directive(指令)，我有条件地显示它，因为它在 ng-if 中。在我的自定义指令中，我显示了 html 元素，其中之一具有绝对定位。

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

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

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

请注意，在链接函数中我还没有元素的 css 样式，因此宽度等于 0，这意味着我不能将它设置为子 div 的宽度。

Answer 1

您的问题是您使用了 restrict: E。
浏览器不会将 getCalculatedStyle 方法绑定(bind)到非标准 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);
  });