AngularJS - Как подвергнуть сомнению DOM, когда направляющее предоставление завершено

Я пытаюсь осуществить таможенный компонент стекла свитка, используя директиву AngularJS. в следующем пример jsfiddle У меня есть пример основного прототипа.

here is a schema of my idea: enter image description here

Вот направляющий код:

    myApp.directive('lpScrollPane', function factory() {
    return {
        restrict: 'A',
        replace: true,
        transclude: true,
        template: '<div class="scrollPaneWrapper"><div class="scrollPane" ng-transclude></div><div class="thumbTrack" ></div></div>',
        compile: function (tElement, tAttrs) {
            var minHeight = 30;
            return function (scope, iElement, iAttrs) {
                var thumbTrack = angular.element(iElement.children()[1]);

                scope.onScrollHeight = function() {
                    console.log(iElement.children()[0].scrollHeight);

                    var H1 = iElement[0].offsetHeight;
                    var H2 = iElement.children()[0].scrollHeight;
                    if (H2 > H1) {
                        var trackHeight = Math.round(minHeight + (H1 - minHeight) * (1 - Math.pow((H2 - H1)/H2, 0.8)));
                        thumbTrack.css({
                            display: "block",
                            height: trackHeight + "px"
                        });
                        console.log(H2, H1, trackHeight);
                    } else {
                        thumbTrack.css({
                            display: "none"
                        });
                    }
                };

                scope.$watch(function() {
                    scope.onScrollHeight();
                    //setTimeout(scope.onScrollHeight, 100)
                });


            }
        }
    };
});

В основном есть 2 погружения 1 со скрытым переполнением и один со свитком переполнения и другим отделением, чтобы подражать шпиону большого пальца.

Моя Цель состоит в том, чтобы контролировать scrollHeight собственность и затем изменить высоту шпиона соответственно. проблема - $watch, запущен, прежде чем DOM предоставлен, таким образом, есть задержка показа и вычисления шпиона. На данный момент я использовал setTimeout на функции часов, и это хорошо работает (линия некомментария 35 и комментарий 34, чтобы видеть его в действии).

Каков был бы правильный способ сделать это?

2
добавлено
Просмотры: 2
nl ja de

2 ответы

See is there a post render callback for Angular JS directive?

К сожалению, нет никакого способа определить, когда предоставление завершено (например, нет никакого события). Используя $timeout, кажется, лучшая доступная работа.

In the link above, @Nik mentioned in a comment that he was checking $('tr').length > 3, for his particular scenario, to determine when rendering was complete. Maybe there is something you could periodically examine in the DOM to determine that rendering is complete.

5
добавлено
Спасибо за это, I' ll изучают его
добавлено автор Shlomi Schwartz, источник

Два наблюдения:

  • , который вы не должны , собирает , по моему скромному мнению, но связь функция
  • необходимо ждать до элемента, готов , вместо того, чтобы использовать перерыв

Так:

myApp.directive('lpScrollPane', function factory() {
  return {
    restrict: 'A',
    replace: true,
    transclude: true,
    template: '<div class="scrollPaneWrapper"><div class="scrollPane" ng-transclude></div><div class="thumbTrack" ></div></div>',
    link: function (scope, iElement, iAttrs) {
      var minHeight = 30;
      var thumbTrack = angular.element(iElement.children()[1]);

      scope.onScrollHeight = function() {
        console.log(iElement.children()[0].scrollHeight);

        var H1 = iElement[0].offsetHeight;
        var H2 = iElement.children()[0].scrollHeight;
        if (H2 > H1) {
          var trackHeight = Math.round(minHeight + (H1 - minHeight) * (1 - Math.pow((H2 - H1)/H2, 0.8)));
          thumbTrack.css({
            display: "block",
            height: trackHeight + "px"
          });
          console.log(H2, H1, trackHeight);
        } else {
          thumbTrack.css({
            display: "none"
          });
        }
      };

      iElement.ready(function() {  
         scope.$watch(function() {
           scope.onScrollHeight();
         });
      });        
    }
  };
});

Посмотрите jsFiddle.

Отредактируйте:

Because 2 images say more than 1000 words, here are two screenshots: last element still viewable gets inserted first element not viewable gets inserted

4
добавлено
Спасибо за ответ, но как вы видите в обновленной скрипке (jsfiddle.net/neuTA/136) это не решает проблему. Вы видите, что thumbTrack создается в задержке шага за один $digest (ждите до переполнения содержания в основании),
добавлено автор Shlomi Schwartz, источник
вы смотрели на обновленную скрипку? (jsfiddle.net/neuTA/136), потому что that' s не, что я вижу, синий бар появляется на втором переполнении линии
добавлено автор Shlomi Schwartz, источник
Нет, это - просто проблема CSS (зафиксированный jsfiddle.net/neuTA/139), я вижу, что нормальное переполнение завивается и затем когда другая линия вставляется, синий бар появляется (я использую хром),
добавлено автор Shlomi Schwartz, источник
Спасибо за усилие, но я вижу его отличающийся. Я заметил, что вы используете Mac, могло там быть различие между хромом для Mac и PC?
добавлено автор Shlomi Schwartz, источник
добавлено автор Shlomi Schwartz, источник
Синий бар появляется с момента переполнение ценностей. That' s не, как это должно быть?
добавлено автор asgoth, источник
вы имеете в виду (половина) синего бара вначале с, появляется в течение половины секунды?
добавлено автор asgoth, источник
I' ve добавил два снимка экрана. Первое - когда последний видимый элемент вставляется. Второе - когда первое не видимый элемент вставляется.
добавлено автор asgoth, источник