угловое повторение скрывает стиль div

Question

угловое повторение скрывает стиль div

0

Я использую угловой 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 (класс: "временной интервал" или "временной интервал") автоматически рассчитывается для его высоты:

и результатом этого кода является:

когда я использую ng-repeat, чтобы получить эти divs (код здесь)

<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 не будет автоматически рассчитана. Как я могу это решить? Заранее спасибо.

RTzhong 21 авг. 2015, в 11:40

Источник

1

Похоже, автоматический расчет выполняется до того, как содержимое вставлено с помощью ng-repeat? Как работает авторазмер? Когда это работает?
GillesC 21 авг. 2015, в 09:18
0

попробуй использовать нг-стиль или нг-класс
RIYAJ KHAN 21 авг. 2015, в 09:21
0

Я нахожу его в файле custom.js: if ($ ('. Timeline')) {$ ('. Timeslot'). Each (function () {var timeslotHeight = $ (this) .find ('. Task') .outerHeight (); $ (this) .css ('height', timeslotHeight);}); }
RTzhong 21 авг. 2015, в 09:27

Показать ещё 1 комментарий

Теги:

html

angularjs

css

1 ответ

Ещё вопросы

Похоже, автоматический расчет выполняется до того, как содержимое вставлено с помощью ng-repeat? Как работает авторазмер? Когда это работает?
попробуй использовать нг-стиль или нг-класс
Я нахожу его в файле custom.js: if ($ ('. Timeline')) {$ ('. Timeslot'). Each (function () {var timeslotHeight = $ (this) .find ('. Task') .outerHeight (); $ (this) .css ('height', timeslotHeight);}); }

Mohan Singh · Answer 1 · 2015-08-21T07-20-00.000Z

Вы должны создать директиву для расчета. если вы делаете это с 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 для директивы