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
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, источник
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Angular — русскоговорящее сообщество
Angular — русскоговорящее сообщество
3 960 участник(ов)

Общаемся на темы Angular 4+, его экосистемы, TypeScript, NativeScript и т.д. По вопросам SSR, Angular Universal @angular_universal_ru См. также: @typescript_ru, @react_js, @nodejs_ru, @js_ru Вакансии и поиск работы: @javascript_jobs

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

Angular.js (1.x) — русскоговорящее сообщество
Angular.js (1.x) — русскоговорящее сообщество
704 участник(ов)

Общаемся и обсуждаем темы, посвященные Angular 1.x и экосистеме.

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском

AngularJS, Javascript
AngularJS, Javascript
370 участник(ов)

Angularjs russian chat