选项卡内的 AngularUI 元素不接受高度

Question

我正在尝试为 tabset 元素内的元素添加动态高度这是描述问题的插件 http://plnkr.co/edit/IoBIkV0spK7mxPuK6As7?p=preview

我正在尝试为带有 id 测试的 div 设置高度任何帮助将不胜感激

HTML:

<tabset class="Tab">
    <tab class="tab1" heading="Static title1">
      <div style='border:1px solid #000;margin-top:15px;' id='test'>Test</div>
    </tab>
    <tab heading="Static title2">Static content2</tab>
    <tab heading="Static title3">Static content3</tab>
  </tabset>

Javascript

$('#test').css('min-height',($(window).height()-350)+'px');

Answer 1

在 AngularJS 中，您不需要在控制器中操作 DOM。你用一个指令来做到这一点。 AngularJS 有很多内置指令，您可以使用它们来操作 DOM，其中之一是 ngStyle。当然，您也可以创建自己的指令。

对于这些示例，您 不需要 jQuery，因为使用 Javascript 操作样式非常简单。但是，如果您需要对 IE8 的支持（它不使用 window.innerHeight 而是使用 document.documentElement.clientHeight）并且想要简化您的代码，或者您只是对 Javascript 不满意，那么您可以在控制器或指令中使用 jQuery 进行计算（不应用样式）。

因此，如果您只想使用内置的 ngStyle 指令，您可以向它传递一个对象，例如：

<div style='border:1px solid #000;margin-top:15px;' ng-style="height" id="test">Test</div>

在你的控制器中：

app.controller('MainCtrl', function($scope) {
  $scope.height = {'min-height': window.innerHeight-350+'px'};
});

如果您想做一些更复杂的事情，您可以创建自己的指令。这是一个例子：

app.directive('setHeight', function(){
  return {
    restrict: 'A',
    scope: {},
    link: function(scope, element, attrs){
      var h = window.innerHeight-350;
      element[0].style.minHeight = h+'px';
    }
  }
});

您可以像这样在标记中使用它：

<div style='border:1px solid #000;margin-top:15px;' id="test" set-height>Test</div>

选项卡内的 AngularUI 元素不接受高度

AngularUI element inside tab not accepting height

twitter-bootstrap

angular-ui-bootstrap