html - angular ng-repeat隐藏了div的样式

Question

我正在使用 angular 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