Question

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

我正在尝试使用id test设置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中使用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元素不接受高度

1 个答案: