javascript - Angular UI - 模态高度相对于窗口高度

Question

我有一个包含大量文本的模态框。我正在尝试弄清楚如何将模态高度限制为窗口大小，并在“确定”按钮上方的内容区域添加滚动条。

Plunkr

<note>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
....

Answer 1

更新为使用 window.innerHeight 并有一个名为 clientHeight 的属性/指令，它接受一些数字并将其用作百分比乘以 window.innerHeight 以调整一些内容的大小并设置溢出 y

http://plnkr.co/edit/9eg3jH0vILntygMn3ieD?p=preview

app.directive('clientHeight', function(){
  return {
    link:function(scope, iElem, iAttrs){
      debugger;
      iElem.css('height', window.innerHeight*iAttrs.clientHeight/100+'px')
      iElem.css('overflow-y', 'scroll')
    }
  }
});

您可能可以单独使用 CSS 来完成此操作，也许使用“calc”或其他方式，但如果不是，上述 JS 解决方案也可以正常工作。