角度ng-repeat隐藏div的样式

Question

我正在使用角度ng-repeat来获得几个div。原始模板html中的代码是：

<div class="span5 noMarginLeft">

  <div class="dark">

    <h1>Timeline</h1>

    <div class="timeline">
      <div class="timeslot">
        <div class="task">
          <span>
					<span class="type">appointment</span>
          <span class="details">
						Dennis Ji at Bootstrap Metro Dashboard HQ
					</span>
          <span>
						remaining time
						<span class="remaining">
							3h 38m 15s
						</span>
          </span>
          </span>
          <div class="arrow"></div>
        </div>
        <div class="icon">
          <i class="icon-map-marker"></i>
        </div>
        <div class="time">
          3:43 PM
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>

并且每个div的类型（类：'timeslot'或'timeslot alt'）的高度都是自动计算的：

并且代码的结果是：

当我使用ng-repeat来获取这些div时，（这里是代码）

<div class="timeslot" ng-repeat="comment in allComments">
  <div class="task">
    <span>
			<span class="type">{{comment.userId}}}</span>
    <span class="details">
				{{comment.content}}
			</span>
    <span>
				<span class="remaining">
					{{comment.dislike}}
				</span>
    </span>
    </span>
    <div class="arrow"></div>
  </div>
  <div class="icon">
    <i class="icon-map-marker"></i>
  </div>
  <div class="time">
    3:43 PM
  </div>

</div>

div的样式消失了，每个div的高度不会自动计算。我怎么解决这个问题？提前谢谢。

Answer 1

您应该创建一个指令来进行计算。如果你用jquery做这个，那么你将面临同样的问题。

 /**
   * Lets create directive
   */
  angular
    .module('demoApplication')
    .directive('autoHeight', [function () {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
       //Do your calculations here 
        console.log(element.css('height'));
      }
    };
  }]);

HTML

 <div class="timeslot" ng-repeat="comment in allComments" auto-height>
  <div class="task">
    <span>
      <span class="type">{{comment.userId}}}</span>
      <span class="details">
        {{comment.content}}
      </span>
      <span>
        <span class="remaining">
          {{comment.dislike}}
        </span>
      </span>
    </span>
    <div class="arrow"></div>
  </div>
  <div class="icon">
    <i class="icon-map-marker"></i>
  </div>
  <div class="time">
    3:43 PM
  </div>
</div>

Woring plunker for directive