javascript - 当 Controller 执行时设置 AngularJS 中元素的高度

Question

我有一个用 AngularJS 编写的 SPA。在名为“XYZController”的 Controller 之一中，相应 View 中某个 html 元素的高度设置如下代码所示。

高度设置为视口(viewport)高度的 65%。

问题:是否有另一种在AngularJS中动态设置高度来满足上述要求的方法？

当使用带有 JavaScript 的简单 html 页面时，这种设置高度的方法是非常正常的，但即使它在 Angular 中工作，我认为在 AngularJS 中可能还有另一种方法。

function XyzController($scope, $state, $mdSidenav) {

document.getElementById('mdc').style.height = 
          .65 * Math.max(document.documentElement.clientHeight, 
          window.innerHeight || 0) + 'px';
 }

Answer 1

你可以尝试这个:

function XyzController($scope, $state, $mdSidenav) {
  $scope.height = .65 * Math.max(document.documentElement.clientHeight, 
      window.innerHeight || 0) + 'px';
}

然后在 Controller 的模板中，您可以执行以下操作:

<div id="mcd" style="height: {{height}}"></div>