Angularjs根據父元素寬度調整寬度

Question

我正在使用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之間的間隙，適用於寬度超過1200px任何分辨率。 兩個組件都需要彼此相鄰顯示。

任何建議非常感謝！

Answer 1

您可以獲取父容器offsetWidth並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' 
      });

    };
});

這是一個演示

Answer 2

我知道它很晚才回答這個問題，但它可能對其他人有所幫助。

工作jsfiddle

<div class="parent border">
  <div class="fixed-component border">
    Fixed Component
  </div>
  <div class="flexible-component border">
    flexible component
  </div>
</div>


<style>
.parent {
  height: 100px;
  display: flex;
}

.flexible-component {
  flex: 1;
}

.fixed-component {
  width: 100px;
}
.border {
  border: 1px solid black;
}
</style>