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>

我希望我的柔性宽度分量拉伸能够自动填充自身与固定宽度组件之间的间隙,适用于宽度超过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

原文地址：https://www.jb51.cc/js/158913.html