Angular: «TypeError: Невозможно прочитать свойство« insertBefore »со значением NULL» при использовании скользящего слайдера

Question

Angular: «TypeError: Невозможно прочитать свойство« insertBefore »со значением NULL» при использовании скользящего слайдера

0

Я использую Slick Slider (https://github.com/kenwheeler/slick), чтобы показать горизонтальный слайдер внизу моей веб-страницы:

    <div class="container" ng-if="schedule.length>0">
      <div class="row">
        <slick dots="true" init-onload="true" data="schedule" center-mode="false" infinite="false" speed="300" slides-to-show="4" touch-move="true" slides-to-scroll="1" class="slider one-time">
          <div ng-repeat="x in schedule">
            <div class="status-x-current">
              <a class="x-button" ng-if="x.title == ''" data-ng-click="showRes(workplace, x)">Click here to to do something</a>
              <h3 ng-if="x.title != ''" id = "x_title1" class="x-slider-title">Titel: {{x.title}}</h3>
              <h3 ng-if="x.title != ''" id = "x_time1" class="x-slider-time">{{x.date}}</h3>
          </div>
          </div>
        </slick>
    </div>
  </div>

Это хорошо работает в начале, когда страница загружается (повторно), но "расписание" источника данных обновляется с сервера каждую минуту и после обновления "расписания" я получаю следующую ошибку, и кнопка не работает:

TypeError: Cannot read property 'insertBefore' of null
    at angular.js?body=1:3851
    at forEach (angular.js?body=1:304)
    at Object.$AnimateProvider.$get.enter (angular.js?body=1:3850)
    at angular.js?body=1:18726
    at publicLinkFn (angular.js?body=1:5421)
    at ngRepeatAction (angular.js?body=1:18724)
    at Object.$watchCollectionAction [as fn] (angular.js?body=1:11300)
    at Scope.$get.Scope.$digest (angular.js?body=1:11396)
    at Scope.$get.Scope.$apply (angular.js?body=1:11635)
    at done (angular.js?body=1:7636)(anonymous function) @ angular.js?body=1:9038$get @ angular.js?body=1:6649$get.Scope.$digest @ angular.js?body=1:11408$get.Scope.$apply @ angular.js?body=1:11635done @ angular.js?body=1:7636completeRequest @ angular.js?body=1:7802xhr.onreadystatechange @ angular.js?body=1:7758

Если я удалю "гладкую" липкость из html-кода, проблем больше не будет, поэтому у меня есть что-то делать с Slick, но я не уверен, что такое точная проблема и как ее решить.

MeesterPatat 03 нояб. 2015, в 10:29

Источник

1

Можете ли вы предоставить мне часть этого кода 3851? Вероятно, я могу проследить эту проблему по источнику. По крайней мере, для ответа на вопрос нам не хватает кода вашего контроллера. Вероятно, интересным является ваш метод обновления или ответ сервера с некоторым недопустимым значением (например, нулевым).
Appeiron 03 нояб. 2015, в 20:02
0

Это часть кода в строке 3851: forEach (element, function (node) {parentNode.insertBefore (node, afterNextSibling);}); но это угловой код, не мой. Я проверил ответ от сервера, и это всегда один и тот же файл JSON, никаких различий. Я не думаю, что это вызвано тем, что сервер возвращает недопустимое значение, потому что он работает нормально, когда я не использую скользкий слайдер.
MeesterPatat 04 нояб. 2015, в 11:11
1

О, я вспомнил - в моем случае, когда я использовал ui-grid null имело место, когда я использовал пользовательский шаблон, и забыл добавить требуемый class в некоторый element который использовался в качестве parentNode . Я предполагаю, что вы просто упускаете какое-то определение необходимого selector который используется для поиска этого parentNode . Проследите, что и когда на самом деле parentNode занимает свое место, и если это не помогает - возьмите пример кода и выполните там отладку, чтобы вы узнали, что на самом деле является этим parentNode
Appeiron 04 нояб. 2015, в 11:16
0

Привет, я нашел причину ошибки. Это из-за "init-onload =" true "data =" schedule "". Это не нравится, когда мой контроллер назначает другое значение для расписания. Если я удаляю эти строки, я не получаю сообщение об ошибке, но каждый раз, когда обновляется расписание, элементы div «status-x-current» добавляются вертикально друг к другу, а не горизонтально рядом друг с другом. Я не знаю решения.
MeesterPatat 04 нояб. 2015, в 14:22
1

float: right : D
Appeiron 04 нояб. 2015, в 14:24
0

Это делает странное поведение слика. Он удаляет пробел между статусами div-x-current после обновления расписания.
MeesterPatat 04 нояб. 2015, в 14:35

Показать ещё 4 комментария

Теги:

javascript

html

angularjs

foreach

1 ответ

Ещё вопросы

Можете ли вы предоставить мне часть этого кода 3851? Вероятно, я могу проследить эту проблему по источнику. По крайней мере, для ответа на вопрос нам не хватает кода вашего контроллера. Вероятно, интересным является ваш метод обновления или ответ сервера с некоторым недопустимым значением (например, нулевым).
Это часть кода в строке 3851: forEach (element, function (node) {parentNode.insertBefore (node, afterNextSibling);}); но это угловой код, не мой. Я проверил ответ от сервера, и это всегда один и тот же файл JSON, никаких различий. Я не думаю, что это вызвано тем, что сервер возвращает недопустимое значение, потому что он работает нормально, когда я не использую скользкий слайдер.
О, я вспомнил - в моем случае, когда я использовал ui-grid null имело место, когда я использовал пользовательский шаблон, и забыл добавить требуемый class в некоторый element который использовался в качестве parentNode . Я предполагаю, что вы просто упускаете какое-то определение необходимого selector который используется для поиска этого parentNode . Проследите, что и когда на самом деле parentNode занимает свое место, и если это не помогает - возьмите пример кода и выполните там отладку, чтобы вы узнали, что на самом деле является этим parentNode
Привет, я нашел причину ошибки. Это из-за "init-onload =" true "data =" schedule "". Это не нравится, когда мой контроллер назначает другое значение для расписания. Если я удаляю эти строки, я не получаю сообщение об ошибке, но каждый раз, когда обновляется расписание, элементы div «status-x-current» добавляются вертикально друг к другу, а не горизонтально рядом друг с другом. Я не знаю решения.
Это делает странное поведение слика. Он удаляет пробел между статусами div-x-current после обновления расписания.

Appeiron · Answer 1 · 2015-11-04T12-14-00.000Z

1

Я шутил о float. Добавьте ng-if='ctrl.isDataLoaded' в ваш блок, поэтому он будет запущен только после того, как ваш controller получит правильные данные. Это должно решить вашу проблему с отсутствием данных на самом деле, пока это не будет полезно.

Appeiron 04 нояб. 2015, в 12:14

0

Я не уверен, что понимаю. К какому блоку вы обращаетесь и как узнать, когда данные полностью загружены? Расписание получает его значение при первой загрузке веб-страницы и обновляется после этого через фиксированный интервал, поэтому оно всегда полностью загружается после первой загрузки страницы. Я попытался установить логическое значение false перед извлечением данных с сервера и установить его в значение true после получения данных и использовать логическое значение в ng-if, но это не сработало.
MeesterPatat 04 нояб. 2015, в 15:00
0

Также кажется, что ошибка всегда возникает после того, как расписание загружается ровно 3 раза. Таким образом, первый график три раза получает новые данные, назначенные с сервера, ошибка не возникает. Через 3 раза я получаю ошибку. И я проверил, если значение расписания в порядке или нет, после того, как он перезагрузил 3 раза, и кажется, хорошо.
MeesterPatat 04 нояб. 2015, в 15:03
0

Итак, вы делаете что-то вроде then((response) => { ... $scope.schedule = response ... }) ?
Appeiron 04 нояб. 2015, в 15:05
0

Вот чем я занимаюсь: (function tick () {ScheduleService.getSchedule ({}, function (response) {$ scope.schedule = response.schedule; $ timeout (tick, 10000);});}) () ;
MeesterPatat 04 нояб. 2015, в 15:12
0

Попробуйте добавить наблюдателя для расписания, чтобы вы могли видеть каждый раз, когда он изменился. У меня было что-то подобное, потому что не я непосредственно менял данные, а директиву.
Appeiron 04 нояб. 2015, в 15:41

Показать ещё 3 комментария