javascript - AngularJS根据父元素的宽度调整宽度

我正在使用 AngularJS 和 Bootstrap，并具有以下结构:

<parent-div>
  <flexible-width-component
            class="pull-left"
            style="display: inline-block; min-width: 700px;">Data grid with many columns
  </flexible-width-component>
  <fixed-width-component
            class="pull-right"
            style="width:400px; display: inline-block">
  </fixed-width-component>
</parent-div>

对于比 flexible-width-component 更宽的任何分辨率，我希望我的 fixed-width-component 拉伸(stretch)自动填充其自身和 1200px 之间的间隙。
两个组件都需要彼此相邻显示。

非常感谢任何建议!

最佳答案

您可以获取父容器offsetWidth并从中减去固定宽度:

var example = angular.module('exmp', []);

example.directive('flexibleWidth', function() {
    return function(scope, element, attr) {

      // Get parent elmenets width and subtract fixed width
      element.css({
        width: element.parent()[0].offsetWidth - 400 + 'px'
      });

    };
});

这是a demo

关于javascript - AngularJS根据父元素的宽度调整宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20756594/