ng-repeat完成后设置元素的css属性（使用工作演示）

Question

我有一个页面，右侧有一个表（文件列表）， 在左侧我有一个filetree（上图）和预览图像（下图）。

重点是，预览图像应始终贴在底部。

这是一个ascii艺术：

+----------+---------------+
| some div |   the         |
+----------+   table       |
|    .     |   on          |
|    .     |   right       |
|    .     |   side,       |
+----------+   filled      |
| DIV stick|   with        |
| to the   |   ng-repeat   |
| bottom   |               |
+----------+---------------+

问题是右侧的表格大小 是未知，直到ng-repeat没有完成填充数据。 （大小只是表头的高度）。

我使用min-height css规则指定左侧的图像位置。

目标是在完全初始化之后测量表格的高度，并将其作为min-height css规则（文件预览类）提供给图像。< / p>

我是如何解决的：

I）我在执行ng-repeat的最后一个元素时创建了.directive： 哪个火灾发生在最重要的事件上？信号。

.directive('onLastRepeat', function() {
    return function(scope, element, attrs) {
      if (scope.$last) {
        setTimeout(function(){
          scope.$emit('onRepeatLast', element, attrs);
        }, 1);
      }
    };
  });

HTML：

<tr on-last-repeat="" ng-repeat="file in filelist track by $index">

I / b）我在控制器中听这个事件：

$scope.$on('onRepeatLast', function(scope, element, attrs){
  $scope.fmsideheight = $scope.getfmheight;
});

II）我创建了一个getHeight指令，它监视元素的高度并在控制器中设置getfmheight变量。

.directive('getHeight', function () {
return {
  scope: {getfmheight: '='},
  restrict: 'A',
  link: function (scope, element) {
    scope.getfmheight = element.offsetHeight;
    scope.$watch(element[0].offsetHeight, function (){
      scope.getfmheight = element[0].offsetHeight;
    });
  }
};
});

HTML：

<div getfmheight="getfmheight" get-height="" id="fm-main" class="col-lg-9 fm-main">

III）我使用另一个指令设置目标元素高度：

.directive('setHeight', function () {
return {
  scope: {fmsideheight: '='},
  restrict: 'A',
  link: function (scope, element) {
    scope.$watch('fmsideheight',function(newValue,OldValue,scope){
      if (newValue){
        element.css('min-height', (scope.fmsideheight+1)+'px');
      }
     });
    element.css('min-height', scope.fmsideheight+'px');
  }
};
});

HTML：

<div fmsideheight="fmsideheight" set-height="" class="col-lg-3 fm-side" style="overflow-x: auto;">

我确实认为这是一种过度使用的解决方案，而且过于复杂。

一个更简单的解决方案是，当ng-repeat最后一个元素被触发时，我可以通过#id以某种方式查询DOM元素，并通过#id设置另一个DOM元素高度。没有$观察一切。

但我到处读到，从控制器访问DOM元素是一个不可取的角度，我无法让它以这种方式工作。

我已经有好几天了，所以我们很感激任何替代/更好的解决方案。

哦，这是一个有效的（我的过度复杂的解决方案）演示：

http://embed.plnkr.co/OnatXIYLlaIEdcR1zUXJ/preview

（编辑窗口：http://plnkr.co/edit/OnatXIYLlaIEdcR1zUXJ）

当您启动plunker演示时， 请在新的预览窗口中启动它， 因为需要水平空间。

在将鼠标悬停在爪子图标上之前，请至少等待10秒钟。 Dunno为什么会出现这种延迟错误。

Answer 1

.ng-scope{
position: relative;
}

.fm-side{
position:absolute;
bottom:0px;  
width: 25%;
/* remember to switch off your min-height set by js */
}

div#fm-main{
float:right;
}

我基于代码中的类，当然可以改进。

在您的页面上工作，尽快制作，但请记住在您的代码中使用媒体查询时检查所有分辨率。